We Keep Coding

Creating input element continuing ID enumeration

I have a button that creates 4 input elements inside a DIV after click:
<div id="content"></div>
<button class="check">Check</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var num = 4;
$(".check").click(function(){
for(i=0; i<num;i++){
$("#content").append("<input id='input"+i+"' type='text'><br>");
}
});
</script>
But the problem is I want input id number continues the enumeration (like this example) instead of return to zero:
<div id="content">
<input id="input0" type="text">
<input id="input1" type="text">
<input id="input2" type="text">
<input id="input3" type="text">
<input id="input4" type="text">
<input id="input5" type="text">
<input id="input6" type="text">
<input id="input7" type="text">
...and continues
</div>
How can I fix it?

You can check the id of the last input. Here I am calculating start and end of for loop based on the total number of elements in #container.
var num = 4;
$(".check").click(function() {
var start = $("#content input").length;
var end = start + num;
for (i = start; i < end; i++) {
var id = 'input' + i;
$("#content").append("<input id='"+id+"' type='text' value='"+id+"'><br>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<button class="check">Check</button>
PS: Here input value is just to demonstrate the id setting to input.

You need some kind of global variable here, or use that simple one:
var getID = (function () {
var id = 0;
return function () { return ++id; }
})();
So whenever you call getID() the »internal« id will be incremented, so each call will yield an new ID.

$(".check").click(function() {
for(var i = 0; i < 4; i++) {
$('<input type="text">') //create a new input
.attr('id', 'input' + $('#content input').length) //id based on number of inputs
.appendTo('#content'); //append it to the container
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<button class="check">Check</button>

If you're asking how to have a stack of elements to begin with, and then continue enumeration from there, you simply need to set a variable to the ID of the latest element.
All you need to do is count the number of elements. This can be done with a combination of .querySelectorAll() and .length.
Then simply have your loop start at this new value instead of 0.
This can be seen in the following:
var total_desired = 20;
var start = document.querySelectorAll('#content > input').length;
console.log(start + " elements to start with");
$(".check").click(function() {
for (i = start; i < total_desired; i++) {
$("#content").append("<input id='input" + i + "' type='text'><br>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="check">Check</button>
<div id="content">
<input id="input0" type="text">
<input id="input1" type="text">
<input id="input2" type="text">
<input id="input3" type="text">
<input id="input4" type="text">
<input id="input5" type="text">
<input id="input6" type="text">
<input id="input7" type="text"> ...and continues
</div>
Having said that, it's unlikely that you actually need simultaneous ID <input> elements, and you may benefit from classes instead.

You can create this object:
var MyId = {
a: 0,
toString() {
return this.a++;
}
}
And concatenate it into the string. Automatically will increase the counter.
<div id="content"></div>
<button class="check">Check</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var GetID = {
a: 0,
toString() {
return this.a++;
}
}
var num = 4;
$(".check").click(function(){
for(i=0; i<num;i++){
$("#content").append("<input id='input"+GetID+"' type='text'><br>");
}
});
</script>

Calculate the volume

I would like to create similar calculator like here. It calculates the volume of a mulch. Visitor inserts three numbers: width, length and height (thickness) and it tells how much it has to buy.
html:
<form method="post" accept-charset="UTF-8">
<div class="form_area">
<div class="form_fields">
<div class="form_field ">
<label class="form_field_label">Width (m)</label>
<input type="text" value="" name="laius" id="laius" rel="calc" class="form_field_textfield form_field_size_medium">
</div>
<div class="form_field ">
<label class="form_field_label">Length (m)</label>
<input type="text" value="" name="pikkus" id="pikkus" rel="calc" class="form_field_textfield form_field_size_medium">
</div>
<div class="form_field ">
<label class="form_field_label">Thickness (cm)</label>
<input type="text" value="" name="paksus" id="paksus" rel="calc" class="form_field_textfield form_field_size_medium">
</div>
<div class="form_field ">
<label class="form_field_label">Total (m<sup>3</sup>)</label>
<input type="text" value="" readonly name="kokku" id="kokku" class="form_field_textfield form_field_size_small">
</div>
</div>
<div class="form_submit">
<input type="submit" value="Arvuta" id="calc_submit" name="commit">
</div>
</div>
</form>
javascript:
! function($) {
$(function() {
$("[rel='calc']").arvutus();
});
$.fn.arvutus = function() {
var inputs = $(this);
var kokku = $("#kokku:first");
inputs.bind("change keyup", function() {
var obj = $(this);
if (obj.val() !== "") {
parseFloat(obj.val()).toFixed(2);
};
arvuta();
});
$("#calc_submit").bind("click", function(e) {
e.preventDefault();
arvuta();
});
function arvuta() {
var width = inputs.filter("#laius").val();
width = width.toString();
width = width.replace(",", ".");
var lenght = inputs.filter("#pikkus").val();
lenght = lenght.toString();
lenght = lenght.replace(",", ".");
var thickness = inputs.filter("#paksus").val();
thickness = thickness.toString();
thickness = thickness.replace(",", ".");
thickness = thickness / 100;
var sum = width * lenght * thickness
sum = sum.toFixed(2);
kokku.val(sum + " m3 multši.");
};
};
}(window.jQuery);
I inserted html and javascript into jsfiddle, but mine doesn't work. Probably i miss something very obvious. some more javascript?
update: a little while ago, somebody provided a working code, but moderator removed it so quickly i couldn't copy it... :(

The code parseFloat(obj.val()).toFixed(2) returns a value, but you're not doing anything with it. Should it be stored somewhere so you can use it in calculating the volume?

How do I tie html inputs into my javascript function?

<!DOCTYPE html>
<html>
<body>
<form>
Birth Year:<br>
<input type="number" name="birthYear">
<br>
Current Year:<br>
<input type="number" name="currentYear">
</form>
<button onclick="calculateAge()">Calculate Age</button>
<div id="output"></div>
<script>
function calculateAge(ghF, xhF) {
var ghF = "birthYear"
var xhF = "currentYear"
return (xhF - ghF);
} {
document.getElementByID("output").innerHTML = text;
};
</script>
</body>
When I click on the button it should print out "You are x age". Where would I add that text? At the moment nothing happens when I click on the button.

getElementById will return the DOM element having id as mentioned argument. .value is property of input element which will give the value of input
Instead of returning value, you must set the innerHTML/innerText after doing subtraction.
Note: You must assign unique id attributes to the element to retrieve DOM element.
function calculateAge() {
var ghF = document.getElementById("birthYear").value;
var xhF = document.getElementById("currentYear").value;
document.getElementById("output").innerHTML = xhF - ghF;
}
<form>
Birth Year:
<br>
<input type="number" name="birthYear" id="birthYear">
<br>Current Year:
<br>
<input type="number" name="currentYear" id="currentYear">
</form>
<button onclick="calculateAge()">Calculate Age</button>
<div id="output"></div>

function calculateAge() {
var ghF = document.getElementById("birthYear").value;
var xhF = document.getElementById("currentYear").value;
document.getElementById("output").innerHTML="You are " +(xhF - ghF) + " age";
}
EXAMPLE

The function is badly formed.
This will do the trick:
function calculateAge() {
var ghF = document.querySelector('[name="birthYear"]').value;
var xhF = document.querySelector('[name="currentYear"]').value;
document.getElementById("output").innerHTML = "You are "+(xhF - ghF)+" age";
}
<form>
Birth Year:
<br>
<input type="number" name="birthYear">
<br>
Current Year:
<br>
<input type="number" name="currentYear">
</form>
<button onclick="calculateAge()">Calculate Age</button>
<div id="output"></div>

How to count number of words in a textfield

I have a user enter biograpgy in a text box html for that is
<p>Biography:
<input type="text" id="biography" name="biography" />
<span id="biographyInvalid" style="color:red; visibility:hidden"> Biography is Invalid </span>
</p>
for Javascript i have a checkme function that is called and i want to do a check inside of it
function checkme(){
var biography=document.getElementById('biography').value;
}
how can i count number of words, do i first convert it to string and then separate with spaces

<div>
<div id="count">145</div>
<div id="barbox"><div id="bar"></div></div>
</div>
<textarea id="contentbox"></textarea>
and js
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 145);
var count= 145 - box.length;
if(box.length <= 145)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
alert(' Full ');
}
return false;
});
});
</script>
$('#contentbox').keyup(function(){} - contentbox is the ID of the textbox.
Using $(this).val() getting the textbox value.
bar is the div ID of the count meter $('#bar').animate() increasing the width.

js:
$('#biography').keyup(function () {
var words = this.value.match(/\S+/g).length;
$('#count').html('Words Count:'+words);
});
HTML:
<div id="count"></div>
This gives you correct words count

This is working example
the HTML
<form name="myform" method="post" action="">
<textarea name="inpString" cols="80" rows="4" onkeyup="countNoOfWords()" >This is a sample text that has been typed to count the number of words it contains. Click the button below to find out.</textarea>
<br />
<input name="noofwords" type="text" value="" size="6" />
</form>
The JS function
<script type="text/javascript">
function countNoOfWords(){
document.myform.noofwords.value = document.myform.post_content.value.split(' ').length;
}
</script>
reference

$('input').keyup(function() {
var cs = this.value.match(/\S+/g).length;
$('#biography').text(cs);
});
Demo - http://jsfiddle.net/hNn5b/685/

How do I initiate a javascript:alert box only if a certain word is typed into the input field?

<script>
var monster = 40
var damage = Math.floor(Math.random()*10)
</script>
<p>Type 'Spark' or 'Fire' to Attack.</p>
<form action="javascript:alert( 'Enemy has' + (monster- damage) + 'Health!' );"
>
<div>
<input type="text">
<input type="submit">
</div>
</form>
<span></span>
</body>
So this is my code so far I type anything in it gives me a text box saying the Enemy has whatever health, I would like to have it where only if you type spark or fire into the input field you get that text box and if you type something random like skdfslkfha nothing happens (unlike now :/)

JS Fiddle
html
<form action="javascript:ale()">
<div>
<input type="text" id="find">
<input type="submit">
</div>
</form>
javascript
function ale() {
a = document.getElementById("find").value
if (a == 'Spark' || a == 'Fire') {
var monster = 40
var damage = Math.floor(Math.random() * 10)
alert('Enemy has ' + (monster - damage) + ' Health!');
}
else{
alert('worng keyword');
}
}