How do I change the HTML itself when I press a button? When I press a button in this case, the value is stored as "displayCount". Is there a way in which I can directly see the count on the HTML code? If it was press one time, I could see the number 1 on the HTML itself, not as a variable?
Thank you!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
</head>
<body>
<input type="button" value="Count" id="countButton" />
<p>The button was pressed <span id="displayCount">0</span> times.</p>
<script type="text/javascript">
var count = 0;
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
button.onclick = function() {
count++;
display.innerHTML = count;
}
</script>
</body>
</html>
For example, if button was pressed once, one of the line would change from
<p>The button was pressed <span id="displayCount">1</span> times.</p>
This Fiddle works as you want..
i changed your script into :
var count = 0;
function countIt(){
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
count++;
display.innerHTML = count;
}
and your HTML to :
<input type="button" onclick="countIt()" value="Count" id="countButton" />
<p>The button was pressed <span id="displayCount">0</span> times.</p>
hope this will help you
<script type="text/javascript">
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
</script>
<button type="button" onClick="onClick()">Count</button>
<p>The button was pressed : <a id="clicks">0</a></p>
Here is my jsfiddle to your problem.
I delete the varible count you used, and just use the number on your HTML, it works well.
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
button.onclick = function(){
display.innerHTML = ++display.innerHTML;
}
Thanks,
Edison
I guess you might want to use parseInt() explicitly increment the count as an integer like this:
var count = parseInt(display.textContent,10);
Your code could go like this:
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
var count = parseInt(display.textContent,10);
button.onclick = function(){
count++;
display.innerHTML = count;
}
DEMO : http://jsfiddle.net/naokiota/9dQjv/2/
The document of the parseInt() is here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
Hope this helps.
<script>
var count = 0;
function counts()
{
var result = document.getElementById('txtbxid');
count ++ ;
result.value = count;
}
</script>
<input type="text" id="txtbxid" name="txtbxid">
<input type="button" id="add" name="add" value="add" onClick="counts()">
Related
im just a beginner and i want to find the answer to this problem.
This is my html code.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type = "text" name = "step" id = "step">
<button onclick="myFunction()">Submit</button>
<p id = "demo"></p>
</body>
</html>
This is my javascript code.
var step = document.getElementById("step").innerHTML;
parseInt(step);
function matchHouses(step) {
var num = 0;
var one = 1;
while (num != step){
one += 5;
num++;
}
return one;
}
function myFunction(){
document.getElementById("demo").innerHTML = matchHouses(step);
}
What I did is to call the function matchHouses(step) by the click of the button. But the output is always 1. I also put parseInt to the step id as it is string but it is still doesnt work. I was expecting an output of 1+5 if the input is 1, 1+5+5 if the input is two and so on. How do I make it work?
The two key things are that a) parseInt won't do the evaluation "in place". It either needs to be assigned to a variable, or the evaluation done as you're passing it into the matchHouse function, and b) you should be getting the value of the input element, not the innerHTML.
Here are some additional notes:
Cache all the elements first.
Add an event listener in your JavaScript rather than using inline JS in the HTML.
No need to have an additional variable for counting - just decrement step until it reaches zero.
Number may be a more suitable alternative to parseInt which requires a radix to work properly. It doesn't always default to base 10 if you leave it out.
Assign the result of calling the function to demo's textContent (not innerHTML as it is just a simple string, and not a string of HTML markup.
// Cache elements
const step = document.querySelector('#step');
const demo = document.querySelector('#demo');
const button = document.querySelector('button');
// Add a listener to the button
button.addEventListener('click', handleClick);
function matchHouses(step) {
let out = 1;
while (step > 0) {
out += 5;
--step;
}
return out;
}
function handleClick() {
// Get the value of the input string and
// coerce it to a number
const n = Number(step.value);
demo.textContent = matchHouses(n);
}
<body>
<input type="text" name="step" id="step">
<button type="button">Submit</button>
<p id="demo"></p>
</body>
I rewrote your code like this:
let step = 0;
function handleInput(e){
step = e.value;
}
function matchHouses(step) {
var num = 0;
var one = 1;
while (num != step){
one += 5;
num++;
}
return one;
}
function myFunction(){
document.getElementById("demo").innerHTML = matchHouses(step);
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type = "text" name="step" id="step" onkeyup='handleInput(this)'>
<button onclick="myFunction()">Submit</button>
<p id = "demo"></p>
</body>
</html>
In my Web university course there is this example with local storage and it says it should show in the input area the number of clicks on the button and also store it in localstorage, but all I get is NaN on the input no matter how many times I click on the button.
<head>
<script>
window.onload = function()
{
var el=document.getElementById("bt");
el.onclick= function()
{
var x = parseInt(localStorage.getItem("nrc"));
if (x!==NaN){
localStorage.setItem("nrc", x + 1);
}
else{
localStorage.setItem("nrc", "1");
}
document.getElementById("write").value = localStorage.getItem("nrc");
}
document.getElementById("write").value = localStorage.getItem("nrc");
var buton2=document.getElementById("bt2");
buton2.onlick = function ()
{
localStorage.removeItem("nrc");
}
}
</script>
</head>
<body>
<p> Number of clicks on the button <input type="text" id="write" value="0"> </p>
<button id="bt"> Click</button>
<button id="bt2"> Click2</button>
</body>
Edit: problem was solved, but now if i want to remove an item from local storage or clear the localstorage it doesn't work.
You have a typo, you wrote onlick instead of onclick
buton2.onclick = function() {
console.log('clearing storage!');
localStorage.removeItem("nrc");
// Reset input back to zero
document.getElementById("write").value = '0';
}
Complete working example here
You were checking a non number to a non number which will always true.
Anyways the solution is already posted in the comments
<head>
<script>
window.onload = function() {
var el = document.getElementById("bt");
el.onclick = function() {
var x = parseInt(localStorage.getItem("nrc"));
if (!isNaN(x)) {
localStorage.setItem("nrc", x + 1);
} else {
localStorage.setItem("nrc", "1");
}
document.getElementById("write").value = localStorage.getItem("nrc");
}
document.getElementById("write").value = localStorage.getItem("nrc");
}
</script>
</head>
<body>
<p> Number of clicks on the button <input type="text" id="write" value="0"> </p>
<button id="bt"> Click</button>
</body>
The goal is to type in one text box a certain value (of pixels or centimeters) then to press a button, and the button to do some maths and show the result in a different text box.
What happens is, I'll get a result of 'NaN', implying that the string I inputted hadn't been converted properly. I've gone through hundreds of methods to fix this and it still doesn't work.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Conversion</title>
</head>
<body bgcolor=#FF0000>
<form id="conversions" name="conversions">
Pixel value :
<br>
<input type="text" name="pxvalue" id="pxvalue">
<br>
<input type="submit" name="convertcm" id="convertcm" value="Convert cm to px!">
<input type="submit" name="convertpx" id="convertpx" value="Convert px to cm!">
<br>Centimeter value :
<br>
<input type="text" name="cmvalue" id="cmvalue">
<br>
<br>Output :
<input type="text" name="output" id="output">
</form>
<!-- This is where all the JavaScript code goes -->
<script>
var form = document.getElementById("conversions");
var strcmvalue = form.elements["cmvalue"];
var strpxvalue = form.elements["pxvalue"];
var cmvalue = ToInteger(strcmvalue);
var pxvalue = ToInteger(strpxvalue);
var output = document.getElementById("output");
var ccmbutton = document.getElementById("convertcm").onclick = cm_to_pixel_conversion(cmvalue);
var cpxbutton = document.getElementById("convertpx").onclick = pixel_to_cm_conversion(pxvalue);
var cm_per_pixel = 0.026458333;
var px_per_cm = 37.795275591;
function pixel_to_cm_conversion(pvalue) {
cmconversion = pvalue / px_per_cm;
output.value = cmconversion.toString();
}
function cm_to_pixel_conversion(cvalue) {
pxconversion = cvalue / cm_per_pixel;
output.value = pxconversion.toString();
}
function ToInteger(x) {
x = Number(x);
return x < 0 ? Math.ceil(x) : Math.floor(x);
}
</script>
<!-- End of the JavaScript code-->
</body>
</html>
Because you are not passing a value to the method, you are passing an html element.
var strcmvalue = form.elements["cmvalue"]; //reference element
var strpxvalue = form.elements["pxvalue"];
var cmvalue = ToInteger(strcmvalue); //passing element, not the value
var pxvalue = ToInteger(strpxvalue);
You need strcmvalue.value or form.elements["cmvalue"].value
Next issue is the fact you read the values when the page loads, so you will only ever have the values from the time it loads.
So you should be reading the values and converting them to numbers inside of your methods, not when the page loads.
After that your click event is calling the function, not referencing it.
var ccmbutton = document.getElementById("convertcm").onclick = function () {
var num = parseInt(strcmvalue.value, 10);
cm_to_pixel_conversion(num);
return false;
};
I have the following HTML:
<button id="ES" class="select" type="button">Select</button>
<h2>Total Units: <span id="totalselected"></span></h2>
and script:
var units=0;
document.getElementById('ES').onclick = function() {
var units=units+2;
document.getElementById("totalselected").innerHTML = units;
};
I want that when the button is clicked, add + 2 to a counter.
It starts off at 0 and is displayed on the webpage.
When the button is clicked, the number jumps to two.
If it is clicked again, the number jumps to four.
Remove the second var on units
var units=0;
document.getElementById('ES').onclick = function() {
units=units+2; // here
document.getElementById("totalselected").innerHTML = units;
};
DEMO
change this:
var units=units+2;
to this:
units=units+2; // remove the keyword var
As per your post:
I want that when the button is clicked, add + 2 to a counter. It starts off at 0 and is displayed on the webpage.
To start your values from 0 you can move your var unit = unit + 2 at the bottom:
var units=0;
document.getElementById('ES').onclick = function() {
document.getElementById("totalselected").innerHTML = units;
units=units+2;
};
<html>
<head>
<script>
var c=0;
function test()
{
c=c+2;
document.getElementById("cnt").innerHTML=c;
}
</script>
</head>
<body>
<input type="button" value="Click" onClick="test()"/>
Count= <p id="cnt""></p>
</body>
</html>
I am trying to create a log box with a text input and a submit button. I can get it to display entered text with
var test = function() {
var test1 = document.getElementById('input');
var totalTest = test1.value;
document.getElementById('log').innerHTML += totalTest;
};
But I cant get it to respond to it. I want to keep asking questions and all answers come from one input box. I am very new still to JavaScript, and would love anyone's help.
Here is all I have so far. JAVASCRIPT:
var playerInput = function () {
var pInput = document.getElementById('input');
var input = pInput.value;
};
var playerNum = function () { //Choice between Single and Multiplayer
document.getElementById('log').innerHTML = "Would you like to play singleplayer or multiplayer?";
oneOrTwo(input);
};
var oneOrTwo = function (input) {
var playerAmount = input;
if (playerAmount == "singleplayer") {
//singlePlay();
} else {
document.getElementById('log').innerHTML = "Multiplayer is coming soon";
//multiPlay();
}
};
HTML:
<!DOCTYPE html>
<html>
<head>
<title> Rock Paper Scissors, with Single and Multiplayer! </title>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="logHeader">
<h1 style="font-size: 20px; font-family: calibri;"> Rock, Paper, Scissors </h1>
</div>
<div id="log"></div>
<br >
<input id="input" type="text" onFocus="if(this.value=='Type here') this.value='';" style="border: 2px solid; width: 300px; background-color: lightblue;" value="Type here">
<input type="button" value="Enter" onClick="test()">
<br >
<br >
<input type="button" onclick="playerNum()" value="Start Game">
</body>
</html>
Really all you need to change is to move the oneOrTwo(input) call up to your playerInput() function.
It doesn't make sense to try to read the input right away after asking the question; the user won't have time to respond.
var playerNum = function () { //Choice between Single and Multiplayer
document.getElementById('log').innerHTML = "Would you like to play singleplayer or multiplayer?";
//nothing else, read the input later
};
When the player enters a response and clicks the 'Enter' button, then try to read the input:
var playerInput = function () {
var pInput = document.getElementById('input');
var input = pInput.value;
oneOrTwo(input);
};
And the corresponding HTML:
<input type="button" value="Enter" onClick="playerInput()">
Threw it into a JSFiddle here: http://jsfiddle.net/KfUp8/
var input = pInput.value; stores the value of your input into that variable.
It will never change unless you execute that same line again.
Replace oneOrTwo(input); with oneOrTwo(pInput.value); to get a fresh value every time.