We Keep Coding

Why does this line work without .value?

function check() {
var input;
input = document.getElementById("check_btwn");
if (!input.checkValidity()) {
document.getElementById("check_message").innerHTML = input.validationMessage;
} else {
document.getElementById("check_message").innerHTML = "OK";
}
}
<input type="number" name="" id="check_btwn" min="100" max="300">
<button type="button" onclick="check()">check</button>
<p id="check_message"></p>
Why .value is not used in input=document.getElementById("check_btwn");
but it’s still working?

With innerHtml what you do is that you add any html within an id, for Ex.
<span id="Test"></span>
<script>
document.getElementById("Test").innerHtml = <h2>This is a test</h2>
</script>
As you can se the span tag will have inside it a new tag that will be an h2, with some text in it, now with value there is a difference, because what value does is that it changes the value attr of a tag, for Ex:
<input type="text" id="Test2" value=""/>
<script>
document.getElementById("Test2").value = "i am the new value"
</script>
you can also find a good documentation in
Javascript innerHtml
javascript value

how to set value in javascript div tag

how to set value using javascript i want set value onclick function + 20 current points please help
my code not working please help me this
ony use javascript not jquery
<div class="score">
<input id="txtscore" value= "0"class="width150" type="text" />
</div>
<div class="box1">
<a href='' onclick='check()'>check</a>
</div>
function check(){
var getvalue = document.getElementById('txtscore').value;
getvalue = getvalue + 20;
}

You need to get your element and set the new value
Convert the entered value to number to get the right result.
You need to validate the entered value before any calculation.
To avoid a refresh in your page, use this: href='#' or bind a click event to prevent the default behavior.
function check() {
var textscore = document.getElementById('txtscore');
textscore.value = Number(textscore.value) + 20;
}
<div class="score">
<input id="txtscore" value="0" class="width150" type="text" /> </div>
<div class="box1">
<a href='#' onclick='check()'>check</a>
</div>

You need to transform the value to a number otherwise you will concatenate a string, you can also use button instead of a link, if you use a link by default the page will refresh...
function check(){
var getvalue = document.getElementById('txtscore').value;
getvalue = parseInt(getvalue) + 20;
document.getElementById('txtscore').value=getvalue;
}
<div class="score">
<input id="txtscore" value= "0"class="width150" type="number" /> </div>
<div class="box1">
<button onclick='check()'>check</button>
</div>

set value of html input or textarea

It is perfectly working. I want to get the current URL and set it inside textarea or input tag. Actually the value is set into a p tag.
function urlf() {
document.getElementById("root").innerHTML = "The full URL of this page is: < br > " + window.location.href;
}
<h2>JavaScript</h2>
<h3>The window.location.href</h3>
<button id="my btn" type="button" onclick="urlf()">
get
</button>
<p id="root"> </p>
How can I do this?

Create an input tag and set its value
function urlf() {
document.getElementById("root").value = "The full URL of this page is:" + window.location.href;
}
<h2>JavaScript</h2>
<h3>The window.location.href</h3>
<button id="my btn" type="button" onclick="urlf()">
get
</button>
<input type="text" style="width:100%;" id="root">

you set the innerHTML of the element with the id root. According to your code this is:
<p id="root"> </p>
so if you want to load the content into an input field you need to change the following:
document.getElementById("root").value = "The full URL of this page is:" + window.location.href;
<input id="root" type="text" />
greetings

<input id="root" type="text">
function urlf() {
document.getElementById("root").value = window.location.href;
}

You just want the current URL in a input? Like below:
function urlf() {
document.getElementById("root").value = "The full URL of this page is:" + window.location.href; }
<div>
<h2>JavaScript</h2>
<h3>The window.location.href</h3>
<button id="my btn" type="button" onclick="urlf()">
get
</button>
<input style="width:500px;" type="text" id="root"/>
</div>

How to get span element with no id which is inside a div with no id

I have 2 span elements inside 2 div elements. Both span elements have no id and both div elements also have no id.
The 1st div has the 1st input element with an id (id_name) and then have the 1st span element after it.
The 2nd div has the 2nd input element with an id (id_password) and then have the 2nd span element after it.
I have a javascript function which I call on submit of form. Inside that function I can get the 1st input element in a variable element_id_name and the 2nd input element in a variable element_id_password. Now how can I get the 1st span element which comes after 1st input element? And how can I get the 2nd span element which comes after 2nd input element? Since I dont have id for span elements, I cannot use document.getElementById(). Is there a way to get 1st span element by reference to 1st input element?
This is my code:
<html>
<head>
<meta charset="ISO-8859-1">
<title>test</title>
<style type="text/css">
.error_noshow{
display: none;
}
.error_show{
color: red;
}
</style>
<script type="text/javascript">
function validate() {
var element_id_name = document.getElementById("id_name");
var element_id_password = document.getElementById("id_password");
return false;
}
</script>
</head>
<body>
<form id="form_login" method="post" action="" onsubmit="validate();">
<div>
<label for="id_name">User Name:</label>
<input type="text" id="id_name" name="txt_user_name">
<span class="error_noshow">Required field</span>
</div>
<div>
<label for="id_password">Password:</label>
<input type="password" id="id_password" name="txt_password">
<span class="error_noshow">Required field</span>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
Thank you for reading my question.

var spans = document.getElementsByTagName('span');
span[0] is the first span, span[1] is the second span. However it's not the preferred way to do this. Use jQuery to make it easier or add an id or classname

To access next span element you can use nextElementSibling property.
<script type="text/javascript">
function validate() {
var element_id_name = document.getElementById("id_name");
var element_id_password = document.getElementById("id_password");
var firstSpan=element_id_name.nextElementSibling;
return false;
}
</script>
But keep in mind that nextElementSibling not working in all version of browsers so you can simulate this using nextSibling http://www.w3schools.com/dom/prop_node_nextsibling.asp;

You can use querySelector to find the elements by their attributes.
function validate() {
var element_id_name = document.querySelector("[name=txt_user_name]");
var element_id_password = document.querySelector("[name=txt_password]");
console.log(element_id_name, element_id_password);
return false;
}
.error_noshow{
display: none;
}
.error_show{
color: red;
}
<form id="form_login" method="post" action="" onsubmit="validate();">
<div>
<label for="id_name">User Name:</label>
<input type="text" id="id_name" name="txt_user_name">
<span class="error_noshow">Required field</span>
</div>
<div>
<label for="id_password">Password:</label>
<input type="password" id="id_password" name="txt_password">
<span class="error_noshow">Required field</span>
</div>
<button type="submit">Submit</button>
</form>

I'm not answering the question because someone already did, but it seems like you want to check if the user typed something in both field, you could skip the javascript and use the HTML5 tag "required" like so
<input type="text" require />.
The user will have an error message if he tries to submit. But keep in mind that old version of IE will skip this check.

Find and replace a number using Javascript

I have a piece of HTML that gets repeated over and over using jQuery (when a user clicks 'add' it creates another block:
<p>
<label for="question[1][text]">Question: <span class="req">*</span></label>
<input name="question[1][text]" id="A_Question_1" value="" type="text" class="f_input" />
</p>
<p>
<label for="question[1][type]">Type: <span class="req">*</span></label>
<input name="question[1][type]" id="A_Type_1" type="text" class="f_input" />
</p>
I need to increment each number by 1 for each iteration of that block, so that the next block automatically creates:
<p>
<label for="question[2][text]">Question: <span class="req">*</span></label>
<input name="question[2][text]" id="A_Question_1" value="" type="text" class="f_input" />
</p>
<p>
<label for="question[2][type]">Type: <span class="req">*</span></label>
<input name="question[2][type]" id="A_Type_1" type="text" class="f_input" />
</p>
I'm sure it's simple enough but I'm not experienced enough with Regexs etc. to work out how to go about it. Thanks :)

JQote offers an HTML templating library for JQuery. It is invoked with an object containing its parameters.
<script type="text/html" id="template">
<![CDATA[
<p>
<label for="question[<%= this.iteration %>][text]">Question: <span class="req">*</span></label>
<input name="question[<%= this.iteration %>][text]" id="A_Question_<%= this.iteration %>" value="" type="text" class="f_input" />
</p>
<p>
<label for="question[<%= this.iteration %>][type]">Type: <span class="req">*</span></label>
<input name="question[<%= this.iteration %>][type]" id="A_Type_<%= this.iteration %>" type="text" class="f_input" />
</p>
]]>
</script>
Then as part of your add() function:
<script type="text/javascript">
var globalIteration = 0
function add() {
<...your code...>
globalIteration++;
var obj= {
iteration: globalIteration,
<...any other variables to insert into template...>
};
$('#template').jqote(obj).appendTo($('body'));
}
</script>

You can store template in some hidden div with placeholders for ids (something like #id#).
Then, you can replace placeholders with actual id in javascript. Something like
var html = $('#template').html().replace('#id#', id);
list.append(html);
The next id can be calculated from the current amount of children.
var id = list.children().length + 1;

Something like this should work:
$(document).ready(function() {
$container = $('#container');
$button = $('#button')
.data('clicked', 0)
.click(function() {
var clicked = $button.data('clicked');
$container.append('<p><label for="question[' + clicked + '][text]">Question: <span class="req">*</span></label><input name="question[' + clicked + '][text]" id="A_Question_' + clicked + '" value="" type="text" class="f_input" /></p>');
$button.data('clicked', clicked + 1);
});
});

It depends on how you are binding your function. If you are binding it in javascript I would probably use the number as a fake property of the add link.
Something like
'Add
Replace [1] with $(this).attr('question_number') in your javascript and at the end add $(this).attr('question_number', nextId)
A better solution might be to tack it on to the id of the link and change the id when the javascript finishes, not a good solution if you are binding by id though.
If you are binding the onclick directly in the html using something like
<a href="javascript:;" onclick="my_func();">Add</a/>
modify your function to take a parameter and change the paramter at the end of the javascript similar to above. I also like Andy's solution.

Here is how I have done it http://pintum.com.au/goCruising/details.html#tabs-2
Click the add button.
It uses jQuery, jtemplates plugin and JSON. Just look at the source for how it works.