I'm trying to simply get the value of an input and put it into a p tag.but it looks like that I'm not getting anything from the input tag
<body>
<input type="text" id="text">
<button class="button" onclick="sum();">click</button>
<p id="lblResult">Result</p>
</body>
<script>
const text = document.getElementById('text').value;
function sum()
{
document.getElementById('lblREsult').innerHTML = text;
}
</script>
You get value from input on page load when it's empty, move document.getElementById('text').value into sum function.
And you have an typo, lblREsult !== lblResult
function sum() {
const text = document.getElementById('text').value;
document.getElementById('lblResult').innerHTML = text;
}
<input type="text" id="text">
<button class="button" onclick="sum();">click</button>
<p id="lblResult">Result</p>
Related
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
JS code
'use strict';
$(document).ready(function() {
});
function change() {
document.getElementById('the-name').innerHTML = document.getElementById('name');
}
HTML code
<p> What's your name? <input type="text" placeholder="Name" id = "name"></input></p>
<button id="button" onclick= "change(document.getElementById('name'))"> Answer </button>
<p>Hello <span id = "the-name"></span>,</p>
With the code above, I get the result in the title whenever I try to run it by clicking the button. Could someone point me to the right direction by telling me what I am doing wrong? Much appreciated, thank you!
Your problem is that you are assigning a HTMLInputElement to the innerHTML of your element instead of a text or a HTML content in the line:
document.getElementById('the-name').innerHTML = document.getElementById('name');
You need to get the input value:
document.getElementById('the-name').innerHTML = document.getElementById('name').value;
Demo:
'use strict';
$(document).ready(function() {});
function change() {
document.getElementById('the-name').innerHTML = document.getElementById('name').value;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> What's your name? <input type="text" placeholder="Name" id="name"></input>
</p>
<button id="button" onclick="change(document.getElementById('name'))"> Answer </button>
<p>Hello <span id="the-name"></span>,</p>
You are assigning the whole HTML-Input Element to your <span>.
You have to use the value property of you HTML-Input Element to get its value.
document.getElementById('the-name').innerHTML = document.getElementById('name').value
I'm trying to pass a number to a text field on button click. User hits "add to cart" and the 2499 is added to the total already in the text field.
<form name="cart">
<input id="display" type="text" name="output" size="6" placeholder="0000"/>
<button id="scart" value="Add to Cart" onclick="addCart()" +='2499'"/>
<script type="text/javascript">
var total=""
function addCart(){
document.getElementById('scart').value;
total+= document.getElementById('display').value;
console.log(total);
}
</script>
When learning, I feel that I understand the logic, but don't know the syntax.
I think this is what you want. I made a codepen for you: https://codepen.io/NeilGBK/pen/boGadz?editors=1111
<form name="cart">
<input id="display" type="text" name="output" size="6" placeholder="0000"/>
</form>
<button id="scart" onclick="addCart(2499)">Add To Cart</button>
<script>
function addCart(v){
document.getElementById('display').value = v
console.log(v);
return false;
}
</script>
I'm passing the number to the function and simply using that to change the value of the input. I'm also logging it to the console
You have some errors, your quotes are not matching and you don't have closing button tag. Also, why don't you add 2499 in the code?
How about this:
<form name="cart">
<input id="display" type="text" name="output" size="6" placeholder="0000"/>
<button id="scart" value="Add to Cart" onclick="addCart()" >
</button>
<script type="text/javascript">
var total=""
function addCart(){
document.getElementById('scart').value;
total+= document.getElementById('display').value + 2499;
console.log(total);
}
</script>
</form>
It's not clear what you are trying to do so I made the beginning of a "cart" button where the input is the quantity you want to add to cart.
I then print out the number typed in and the total if you pressed the button more than once.
<input id="display" type="text" name="output" size="6" placeholder="0000" />
<button id="scart" type="button">Add to cart</button>
<script type="text/javascript">
var total = 0;
var display = document.querySelector('#display');
var scart = document.querySelector('#scart');
scart.addEventListener('click', function() {
var str = display.value;
var num = parseInt(str, 10);
console.log('You entered the number: ', num);
if (!isNaN(num)) {
total += num;
}
console.log('The total is now: ', total);
});
</script>
There are many things that is wrong here:
First, replace + with a good indicator data-value or whatever
<button id="scart" value="Add to Cart" onclick="addCart()" data-value="2499"/>
Second, In your script you should make var total a number not string.
var total = 0;
Finally, your addCart() function.
function addCart() {
// I see you are trying to get the value of the clicked button so you need to store it as this does not do anything
// document.getElementById('scart').value;
var value = document.getElementById('scart').value;
// Add it to total var;, you need to parseInt it as .value returns string
total += parseInt(value);
// put it on display
document.getElementById('display').value = total;
}
Hope that helps.
I have something like this in an HTML file:
<html>
<body>
<script type = text/javascript">
var value = 0;
add(x){
x++;
document.write(x);
}
</script>
<form>
<input type = "button" value = "Add one" onClick = "add(value)" >
</form>
<body>
</html>
When I run this and click the button, the page will just update and display only the new value. How can I change this so that it's just a real time update, and the "Add one" button remains on the screen?
I think I need to have something like a "field" to display the value, and just get that field id, but I'm not sure if that's the right way of thinking.
Just use a span:
<form>
<input type="button" value="Add one" onclick="add();"/>
</form>
<span id="field">0</span>
Then, use document.getElementById() and innerHTML to update it:
var value = 0;
function add() {
value++;
document.getElementById("field").innerHTML = value;
}
var value = 0;
function add() {
value++;
document.getElementById("field").innerHTML = value;
}
<form>
<input type="button" value="Add one" onclick="add();"/>
</form>
<span id="field">0</span>
In your html add an id in a div for example addOne
<html>
<body>
<script type = text/javascript">
var x = 0;
function increment(value){
document.getElementById('addOne').innerHTML = ++x;
}
</script>
<form>
<input type = "button" onClick = "increment(value)" >
</form>
<div id ="addOne"></div>
<body>
</html>
Hi im trying to get the number pushed into the array but cant seem to link the input to the array any help please
<html>
<body>
<form id="myform">
<input type="text" name="input">
<button onclick="myFunction()">Add number</button>
</form>
<br>
<div id="box"; style="border:1px solid black;width:150px;height:150px;overflow:auto">
</div>
<script>
var number= [];
function myFunction()
{
number.push=("myform")
var x=document.getElementById("box");
x.innerHTML=number.join('<br/>');
}
</script>
</body>
</html>
You are assigning, when you should be calling. On top of that you are fetching the value wrong.
number.push(document.getElementById('myform')['input'].value);
You are adding the id of the form as a string. You have to add the value of the field, so that you can get it later:
var number= [];
function myFunction()
{
var input = document.getElementById('input');
number.push(input.value);
var x=document.getElementById("box");
x.innerHTML=number.join('<br/>');
}