I have some Input fields on my page, these fields are already filled when I refresh the page.
How can I clear the pre-filled input fields without using reset button on page refresh?
function add() {
var num1, num2, c;
num1 = Number(document.getElementById("a").value);
num2 = Number(document.getElementById("b").value);
c = num2 + num1;
document.getElementById("answer").value = c;
}
<!doctype html>
<html>
<title>
addition WEBSITE
</title>
<body>
<div align="center">
<h1>addition</h1>
a= <input id="a"> b= <input id="b">
<button onclick="add()">Add</button> Sum= <input id="answer">
</div>
</body>
</html>
You can clear the fields on window.onload .
<!doctype html>
<html>
<title>
addition WEBSITE
</title>
<head>
</head>
<script >
window.onload = function(){
document.getElementById("a").innerHTML = "";
document.getElementById("b").innerHTML = "";
}
function add()
{
var num1,num2,c;
num1= Number(document.getElementById("a").value);
num2= Number(document.getElementById("b").value);
c=num2+num1;
document.getElementById("answer").value=c;
}
</script>
<body>
<div align="center">
<h1>
addition
</h1>
a= <input id="a">
b= <input id="b" >
<button onclick="add()">Add</button>
Sum= <input id="answer" >
</div>
</body>
</html>
Your code should be better.
Anyway, if you want the fields to be empty when refreshing the page, create an anonymous function called by itself like this:
function () {
document.getElementById('a').value = "";
}
Get the other input elements and do the same inside this function.
Happy coding !!
Related
So I am testing the permute function of D3.js and it works just fine.
The issue I am having is to display the results on the same page using innerHTML, it always reloads in order to display.
I am probably missing a detail here, can someone help?
permute.html:
<html>
<head>
<meta charset="UTF-8">
<script language="JavaScript">
function* permute(keys) {
var size = keys.length,
c = Array(size).fill(0),
i = 1;
yield keys;
while (i < size) {
if (c[i] < i) {
var k = i % 2 && c[i];
[keys[i], keys[k]] = [keys[k], keys[i]];
c[i]++;
i = 1;
yield keys;
} else {
c[i++] = 0;
}
}
}
function showPermutations(){
var input = document.getElementById("keys").value;
document.getElementById('results').innerHTML=input;
for (var words of permute(input.split(/\s+/))) {
document.write(words.join(''));
document.write("<br>");
}
}
</script>
<body>
<form>
<label><b>Keywords</b></label></br>
<input type="text" id="keys" name="keys"></br>
</form>
</br>
<input type="submit" value="Permute" onclick="showPermutations();"></br>
<p><span id='results'></span></p>
</head>
</body>
</html>
Some of you pointed out the issue is caused by the submit button, but in this other example, using submit, the JS works just fine on the same page:
test.html
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}
</script>
</head>
<body>
<form>
<label><b>Enter a Message</b></label>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showInput();"><br/>
<label>Your input: </label>
<p><span id='display'></span></p>
</body>
</html>
When you click the submit button, the page will automatically reload. You should prevent that by calling the preventDefault method of the event object that is passed to the event handler, in your case, that handler would be showPermutations.
Make that function receive one argument, called e, ev, or event (as it is normally called) and inside it, execute the preventDefault method before anything else.
function showPermutations(e){
e.preventDefault();
...
}
Or don't use a submit button.
I'm creating a webpage which checks whether the data given by the user matches the data in the webpage's script.
My code:
var a = document.getElementById("a");
var b = document.getElementById("p");
function checking() {
if (b.innerHTML == a.value){
alert("All is perfect");
} else {
alert("Please check again");
}
}
<!DOCTYPE html>
<html>
<head>
<title>Terms and Conditions Checker</title>
</head>
<body>
<input id="a" autocomplete="off" />
<button onclick="checking()">Check</button>
<div id="p" style="display:none;">
a
b
</div>
</body>
</html>
So, I want to replace the empty spaces at the end of the lines with a space inside the <div>. So, if the code is
<div id="p" style="display:none;">
a
b
</div>
it should match:
<div id="p" style="display:none;"> a b </div>
Remove all tab , enter and using regex /(\r\n\t|\n|\r\t)/gm
See below snippet :
var a = document.getElementById("a");
var b = document.getElementById("p");
function checking() {
var val = b.innerHTML.replace(/(\r\n\t|\n|\r\t)/gm, "");
console.log(a.value,val);
if (val == a.value){
alert("All is perfect");
} else {
alert("Please check again");
}
}
<!DOCTYPE html>
<html>
<head>
<title>Terms and Conditions Checker</title>
</head>
<body>
<input id="a" autocomplete="off" />
<button onclick="checking()">Check</button>
<div id="p" style="display:none;">
a
b
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<form id="window">
<input type="text" id="num1"><br />
<input type="text" id="num2"><br />
<input type="button" value="Calculate" onClick="main()"><br />
</form>
<script>
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
function main(){
alert(num1 + num2);
}
</script>
</body>
</html>
This is my code tell me what I am doing wrong because whenever I call the alert() it just returns 0 to the screen. I have tried it in different browsers but with no luck. Go easy on me because I have started only about a week ago!``
It's because you're setting the values of num1 and num2 once, right at the beginning of the script when the inputs don't have anything in them yet (Number("") is 0), not each time main is called. Just move those two lines into main so the values of the inputs as of the button click are used:
function main(){
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
alert(num1 + num2);
}
You need to get num1 and num2 inside main(); Use below code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<form id="window">
<input type="text" id="num1"><br />
<input type="text" id="num2"><br />
<input type="button" value="Calculate" onClick="main()"><br />
</form>
<script>
function main(){
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
alert(num1 + num2);
}
</script>
</body>
</html>
This is my code. When I click the calculate button it is displaying just the number 35. WHere have I gone wrong and how can I fix it?
<!doctype html>
<html>
<head>
<title>JS Practise 2</title>
</head>
<body>
<h1> Problem 1.1 </h1>
<script language="javascript">
var topsoil_amount = 1;
function calculate() {
var topsoil_amount = document.getElementById(Input);
var topsoil_cost = 15;
var cost = (topsoil_amount * topsoil_cost) + 35;
alert(cost);
}
</script>
<br>
<input type="text" name="Input" size="16" id="Input">
<input type="button" value="Calculate" onClick="calculate()">
</body>
</html>
topsoil_amount is a DOM element, not a number. You need to reference the value. Secons issue is you need quotes around the id.
var topsoil_amount = document.getElementById("Input").value;
This is works fine when the form does not have any value. But, Once i entered the value on the textbox, it still alert the same messages i.e it is omitting 'You must enter value' for both cases,see at the if else statement. what is the mistake on the below code?
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item = document.getElementById("textbox1").value.length;
var item1 = document.forms[0].textname;
function formValid() {
if (item == 0) {
alert("You must enter value");
}
else {
alert(item1);
}
}
var formEl = document.getElementById("submitbutton1");
formEl.addEventListener("click", formValid());
</script>
</form>
</body>
</html>
You are fetching the length of the value when the page loads instead of when the the function runs.
Move
var item = document.getElementById("textbox1").value.length
inside the function.
Use this syntax in addEventListener formEl.addEventListener("click", formValid,false);
Also replace var item inside the function formValid().
Here is the fiddle
try this
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item1 = document.forms[0].textname;
var formEl = document.getElementById("submitbutton1");
function init() {
formEl.addEventListener("click", formValid());
}
function formValid() {
var item = document.getElementById("textbox1").value.length;
if (item == 0) {
alert("You must enter value");
}
else if {
alert(item1);
}
}
</script>
</form>
</body>
</html>