So the way this code is supposed to work is like this, when I click the button I am going to add +1 to the variable antal and the second time when I press the button it should add another +1 making it 2.
Now the problem is that every time I push the button I instead get another 1 so the second time I have 11 and the third 111 I've tried everything but I cant get it right.
I can understand that there is a simple fix to this but I am quite new, thanks in advance for your answers. =)
<html>
<head>
<title>Uppgift 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script Language="JavaScript">
var antal = 0;
var $antalClick = {};
$antalClick.click = function() {
var antal = Math.round(document.getElementById("antal").value += 1);
};
</script>
</head>
<body>
<form name="formone">
<input type="button" value="resultat" onClick="$antalClick.click ();"/>
<input type="text" id="antal"/>
</form>
</body>
</html>
The problem is it is interpreting it as a string. You have to force it to be a number with parseInt()
Try
Math.round(parseInt(document.getElementById("antal").value) + 1);
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Im not sure what to search on google but here is what Im trying to do..
Currently this is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Code weight convertor</title>
<link type="text/css" rel="stylesheet" href="styling.css">
</head>
<body>
<input type="text" placeholder="Product Code" class="pcode">
<button class="btn=find"><i class="x"></i>Find</button>
<div class="res" id="res1">Result1</div>
<script src="app.js"></script>
</body>
</html>
Where it says result1 id like that to change to whatever has been inputted in the text field provided after button been clicked on.
Lets say...
I have enetered 123 into the text field. Click Find, the result1 now changes to 123.
Im not sure where to start with this one, have already looked into google for readings, but couldn't find anything useful.
You need to add a click event listener to button element. When button is clicked, get the value from the input field and display it in the result div element
const btn = document.querySelector('.btn-find');
const inputField = document.querySelector('.pcode');
const result = document.querySelector('.res');
btn.addEventListener('click', () => {
if (inputField.value !== '') {
result.textContent = inputField.value;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Code weight convertor</title>
<link type="text/css" rel="stylesheet" href="styling.css">
</head>
<body>
<input type="text" placeholder="Product Code" class="pcode">
<button class="btn-find"><i class="x"></i>Find</button>
<div class="res" id="res1">Result1</div>
<script src="app.js"></script>
</body>
</html>
You'll need to add a class to your input:
<input id="myText" type="text" placeholder="Product Code" class="pcode">
and some JavaScript:
<script type="text/javascript">
function myFunction() {
document.getElementById("res1").innerHTML = document.getElementById("myText").value;
}
</script>
In-case you use jquery, you can do like this.
<input type="text" class="search__input">
<button>click</button>
$("button").click(event => {
let result = $(".search__input").val();
console.log(result);
});
you can do this, say the find button id is id="find"
$("#find").click(function(){
var inputdata = $(".pcode").val();
document.getElementById("res1").innerHTML = inputdata;
});
you can try this code. It will work.
This question already has answers here:
JavaScript code to stop form submission
(14 answers)
Closed 4 years ago.
I am a beginner to JavaScript. I am buliding a BMI calculator. It gives the output for a few milliseconds and then the result disappears.
<!DOCTYPE html>
<html>
<head>
<title>BMI Calculator</title>
</head>
<body>
<form>
Weight:-<input type="text" id="wtxt"><br>
Height:-<input type="text" id="htxt"><br>
BMI:-<input type="text" id="bmitxt"><br>
<input type="reset" value="clear"><br>
<button onclick="calcbmi()">Calc BMI</button>
</form>
<script type="text/javascript">
function calcbmi(){
var w=parseInt(document.getElementById('wtxt').value);
var h=parseInt(document.getElementById('htxt').value);
var z=w/(h*h);
document.getElementById('bmitxt').value=z;
}
</script>
</body>
</html>
To separate behavior from the view, you can do it like this:
The button:
<button>Calc BMI</button>
The script:
<script type="text/javascript">
document.querySelector("button").addEventListener("click", function(event) {
calcbmi();
event.preventDefault();
}, false);
function calcbmi() {
var w = parseInt(document.getElementById('wtxt').value);
var h = parseInt(document.getElementById('htxt').value);
var z = w / (h * h);
document.getElementById('bmitxt').value = z;
}
</script>
Source
Looks like the comments are answering your question. Shortest path is to change the button to a different type so it doesn't submit the form, thus causing the page to load again. Form makes it simple for inputs, but isn't strictly necessary.
Calc BMI
More info here:
How to prevent buttons from submitting forms
By default, form makes a GET request on submit. Source
You're submitting the form each time you click submit and the browser is trying to make a request to nothing since there is no action attribute specified. I've copied a working example of your code below. As noted in the comments, remove the form. Your code will work then.
<!DOCTYPE html>
<html>
<head>
<title>BMI Calculator</title>
</head>
<body>
Weight:-<input type="text" id="wtxt"><br>
Height:-<input type="text" id="htxt"><br>
BMI:-<input type="text" id="bmitxt"><br>
<input type="reset" value="clear"><br>
<button onclick="calcbmi()">Calc BMI</button>
<script type="text/javascript">
function calcbmi(){
var w=parseInt(document.getElementById('wtxt').value);
var h=parseInt(document.getElementById('htxt').value);
var z=w/(h*h);
document.getElementById('bmitxt').value=z;
}
</script>
</body>
</html>
You can see a fiddle here
Hello again StackOverflow peeps! = )
Now I'm trying to get the value from two textboxes into a div\p\span
So, in the first box I write some text, and in the second a number
Now, when I click the button, its supposed to take the value from box1 and then write it in the div, as many times as the value in box2.
I've gotten it to take the value from box1 to the div, but I can't get it to duplicate it with a numbervalue from box2. I removed my faulty code and whats left is just the copy value to <p> thing
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function starfire () {
document.getElementById("tekst").innerHTML = document.getElementById("boks1").value;
return true;
}
</script>
</head>
<header>
<h1>cake</h1>
</header>
<body>
<input type="text" id="boks1">
<input type="number" id="boks2">
<br>
<button type="button" id="btn" onclick="starfire()">Trykk</button>
<p id="tekst"></p>
</body>
</html>
Appreciate any help from you awesome people <3 =)
Sincerely
Gruff
function starfire () {
var boks1=document.getElementById("boks1").value;
var boks2=parseInt(document.getElementById("boks2").value);
var html="";
for (var i=1; i<=boks2; i++) {
html+=boks1;
}
document.getElementById("tekst").innerHTML = html;
}
Is there a way of printing my clickCount to the page without using an input element?
Here is my code for a better understanding:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Vote!</title>
<script type="text/javascript">
function countClicks() {
var x = 0;
x += 1
document.getElementById( "counting" ).value = x;
var clickLimit = 1; //Max number of clicks
if(x>=clickLimit) {
}
else
{
ClickCount++;
return true;
}
}
</script>
</head>
<body>
<input type="button" value="VOTE" name="clickOnce" onclick="return countClicks();" /><br>
<input id="counting" type="text">
</body>
</html>
You can put your value into any element.
Given your current code, replacing your input with a div and using innerHTML instead of value will work.
document.getElementById( "counting" ).innerHTML = x;
<div id="counting"></div>
Might I also point you in the direction of jQuery. This will make your life a lot easier whilst working with Javascript.
Working example.
I have two jsp(one is main page, another one is new window) and single javascript file.
MainPage and New Window have 'Test' , 'ClickedCount' buttons.
First, I click 3 times in MainPage 'Test' button . Then i open New Window.
Now , i click 2 times in newWindow 'Test' button.
So totally i clicked 5 times.
each time i click, i count the button click in javascript.
But mainwindow shows only 3 times, --> getTestButtonClickedCount()
And new window shows only 2 times . --> getTestButtonClickedCount()
Here i use same single javascript file (count.js)
So how to get total clickCount both window (mainWindow + NewWindow) 'Test' button.
MainWindow.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="count.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="Test" onclick="countTestButtonClick()"/>
<input type="button" value="ClickedCount" onclick="getTestButtonClickedCount();"/>
<a href="#" onclick = "window.open('NewWindow.jsp','newwindow',
'width=400,height=200')">Click to open New window</a>
</body>
</html>
NewWindow.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="count.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="Test" onclick="countTestButtonClick()"/>
<input type="button" value="ClickedCount" onclick="getTestButtonClickedCount();"/>
</body>
</html>
count.js
var clickCount = 0;
function countTestButtonClick()
{
clickCount++;
}
function getTestButtonClickedCount()
{
alert("Total Number of clicked : " + clickCount);
}
Help me about this.
Thanks for your effort.
Remove the JS from the newWindow and change to
<input type="button" value="Test" onclick="opener.countTestButtonClick()"/>
<input type="button" value="ClickedCount" onclick="opener.getTestButtonClickedCount();"/>
Alternatively if one window does not open the other, use a cookie to store the clicks, reading it in and updating it and storing it each time