Changing the value of a input box in HTML within a script - javascript

Statement In JS HTML5 I have a input box defined as
<input type="number" id="Numerator" value=40>
<input type="number" id="Denominator" value=48>
I want to change the value of these within a script.
Question: What HTML5 command will allow me to change the value of id="Numerator"?
Example
var k = 2
(insert command here to change id="Numerator" to value k)
I know how to pull the value using
document.getElementbyID("Numerator").value
but I cannot figure out how to change the value of that id....
any help would be appreciated and I could not find that value...

You have a typo in your getElementbyID. It should be getElementById:
var k = 2;
document.getElementById("Numerator").value = k;
<input type="number" id="Numerator" value=40>
<input type="number" id="Denominator" value=48>

Try This:-
document.getElementById("Numerator").value = "My value";

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
var el = document.getElementbyID("Numerator");
el.setAttribute("ID", "your-new-id");

You can use like this
document.getElementById('Numerator').value = "Set Value To textbox using javascript";

Related

Javascript Alert is not displaying

I working on a simple JavaScript code and having some trouble getting my alert to display from my code. From what I understand the script should cause an alert box to pop up and display.
Here is the HTML:
The problem is you have not assign any id or anything to get the value. Here is the code ,please try this.
<input type = "text" value = "" id="input1" name="" >
<input type = "text" value = "" id="input2" name="" >
<button onClick="add()"> Add </button>
function add()
{
var input1 = document.getElementById("input1").value;
var input2 = document.getElementById("input2").value;
alert(parseInt(input1) + parseInt(input2));
}
You need to specify ID in the input tags then try to call the alert using JS.

How to add sum in my input value and chage

I have this code:
<input id=​"InvoiceItemPrice:​:​:​:​" name=​"InvoiceItemPrice:​:​:​:​" value size=​"6">​
<input id=​"InvoiceItemPrice:​:​1:​:​" name=​"InvoiceItemPrice:​:​1:​:​" value=​"46.00" size=​"6">​
<input id=​"InvoiceItemPrice:​:​2:​:​" name=​"InvoiceItemPrice:​:​2:​:​" value=​"79.00" size=​"6">​,
<input id=​"InvoiceItemPrice:​:​3:​:​" name=​"InvoiceItemPrice:​:​3:​:​" value=​"14.00" size=​"6">​
I like add sum in every value ot input type i have this code:
var sum = 100/123;
$('input[name="InvoiceItemPrice::2::"]').each(function()
{
sum *= parseFloat($(this).val());
});
$('input[name="InvoiceItemPrice::2::"]').val(sum);
How to change all value on all input.
I tried with this $("input [name = ' * InvoiceItemPrice ']") but I caught the first that does not have a value and NaN gives me an error.
What is happening is your sum variable is getting re-used in your each statement, if you change that line inside of your each you should be A-ok.
I have created a jsFiddle here https://jsfiddle.net/r79d3121/3/ which may help
HTML
<input id="InvoiceItemPrice::::" name="InvoiceItemPrice::::" value size="6">
<input id="InvoiceItemPrice::1::" name="InvoiceItemPrice::1::" value="46.00" size="6">
<input id="InvoiceItemPrice::2::" name="InvoiceItemPrice::2::" value="79.00" size="6">,
<input id="InvoiceItemPrice::3::" name="InvoiceItemPrice::3::" value="14.00" size="6">
jQuery
var sum = parseFloat(100 / 123);
$(function () {
var result = 0;
$('[id*="InvoiceItemPrice"]').each(function () {
$(this).val(parseFloat((parseFloat($(this).val()) * parseFloat(sum))));
});
});
Updated to change only the value from the input selected
2nd Update, values are calculated when the document is ready, if you want the values to be updated you could always check for .focusout() on each input and then run the code to calculate the value
3rd Update, the html is back to the original and also, you can just user a partial selector in your jQuery which I have provided and updated the jsFiddle link
Try something like this:
$('input[name^=InvoiceItemPrice]').each(function() {
$(this).val("example");
});

Copy a script value to Input tag

I have a page counter that I want to put into a form input value.
Here is the script:
<script id="counter">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write(localStorage.pagecount);
</script>
And this is where I want it to go:
<input id="RR_No" type="text" size="10" name="RR_No" required>
But I don't know how to copy the value.
I'm really new to javascript so if you can reply with really simple answers that would really help.
Thanks,
Chris
document.getElementById('RR_No').value = localStorage.pagecount;
document.getElementById is used to find the DOM element with id="RR_No". The .value property is used to set or retrieve the value of an input element.
Replace document.write line with:
document.getElementById('RR_No').value = localStorage.pagecount;
<input id="RR_No" type="text" size="10" name="RR_No" required>
Instead of document.write write:
document.getElementById('RR_No').value = localStorage.pagecount
Checkout This DEMO: http://jsbin.com/komofe/1/

Editing html input element from javascript bugs out

I have this input field in html:
<input id="title" type="text" class="" />
A button will allow the user to randomize the value of the input field by calling a js function.
var title = document.getElementById("title");
title.removeAttribute("value");
title.setAttribute("value",random_name);
If the user wants to change the value auto-asigned by my function (aka random_name), he can simply type something else in the input field.
All works fine until now, however if the user changes his mind and clicks the randomize button again, the function is called and "value" attribute is modified, but the user still sees the last thing he typed and not the new random value.
Is there a way to fix this or maybe a workaround?
Just do title.value = random_name
You can set an input's value by element.value = "desired_value". If you use that, it works.
http://jsfiddle.net/f4gVR/2/
<input id="title" type="text" class="" />
<input type="button" class="" onclick="randomValue()" value="Random" />
function randomValue() {
var title = document.getElementById("title");
title.value = Math.random(); // assign random_name to title.value here
}
if it's your random_name bugging out, you should post the code. Try this first. Just replace Math.random() with random_name.
you need to use title.value = random_name; instead of title.setAttribute("value",random_name);
Fiddle: http://jsfiddle.net/4dhKa/

Why can't I get the value of this text input field?

I have a div, which contains a text input field:
<div id="age" class="fullScreen">
<input type="text" id="age" class="textInput" placeholder="Please enter age..." />
<button type="button" onclick="submitAge()">Submit</button>
</div>
submitAge() looks like this:
function submitAge() {
var ageVal = document.getElementById("age").text;
alert(ageVal);
}
But in Google Chrome and Webkit Nightly I see an alert with the text "undefined" (I can't test in any other browsers because the page contains web-sockets).
The chrome developer tools show this:
I assume that the problem is that the input is not in a form, but I don't want it to be in a form because I will be submitting the data via websockets.
Do I have to put it in a form or is there a better solution?
Thanks.
You have redefined the id "age". Rename either your div or input and you should be fine.
Try:
function submitAge() {
var ageVal = document.getElementById("age").value;
alert(ageVal);
}
var ageVal = document.getElementById('age').value;
alert(ageVal)
Note the .value instead of text
Change:
var ageVal = document.getElementById("age").text;
to
var ageVal = document.getElementById("age").value;
You <div> has the id of age. This is going to return either the div or an array of HTMLElements. Get a unique id of the input and you will be golden
Try
document.getDocumentById("age").value;

Categories