Clear content with button - javascript

I am able to save user data from input field into paragraph, but I want to delete the contents of the paragraph with a click of button.
HTML:
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
<button onclick="clear()">clear</button>
JAVASCRIPT:
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML += '<br>' + Name;
}
function clear(){
document.getElementById('result').innerHTML = "";
}

I think the problem here is the clear() function name, it's not a reserved word, but it will invoke document.clear in the first place, so try any other name for your function:
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML += '<br>' + Name;
}
function clearContent(){
document.getElementById('result').innerHTML = '';
}
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
<button onclick="clearContent()">clear</button>
Update
To remove the inserted data one by one, you need to create an event listener for each created element, a simple implementation would be (remove element on click):
function fn() {
var Name = document.getElementById('name').value;
var paragraph = document.createElement('p');
paragraph.innerHTML = Name + ' (X)';
paragraph.onclick = function(el) {
el.target.remove();
return false;
};
document.getElementById('result').appendChild(paragraph);
}
function clearContent(){
document.getElementById('result').innerHTML = '';
}
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
<button onclick="clearContent()">clear</button>

It seems clear will call document.clear. Change the function name to something else
let dom = document.getElementById('result');
function fn() {
var Name = document.getElementById('name').value;
dom.innerHTML += '<br>' + Name;
}
function clearVal() {
dom.innerHTML = "";
}
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
<button onclick="clearVal()">clear</button>

clear method of the window object will be called. Therefore, you are not able to see the changes. Rename your function except clear
In order to reset the input, you can use document.getElementById('name').reset().
var randkey=0;
function fn(){
var Name = document.getElementById('name').value;
randKey = Math.floor(Math.random()*999);
document.getElementById('result').innerHTML += '<div id='+randKey+'>' + Name +'<br><button onclick=cleardd('+randKey+')>clear</button></div>';
}
function cleardd(randKey){
document.getElementById(randKey).remove();
}
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div id="result">
</div>

Please use any name other than clear. I think it is a keyword.
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML += '<br>' + Name;
}
function clearText(){
document.getElementById('result').innerHTML = '';
}
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
<button onclick="clearText()">clear</button>

Related

How do I add Text before my answer in the text box using setAttribute but only after the resullt has been printed

I want it to read the-number-that-has-been-computed) where the-number-that-has-been-computed is the result of the addition of the first two text boxes( I am also using window.onload that is why my script is in the head of the file.
function setUpEvents() {
function add_number() {
var first_number = parseInt(document.getElementById("tb1").value);
var second_number = parseInt(document.getElementById("tb2").value);
var result = first_number + second_number;
document.getElementById("tb3").value = result;
};
}
window.onload = function() {
setUpEvents();
};
<div>
<h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1">
<br> Enter Second Number : <br>
<input type="text" id="tb2" name="TextBox2">
<br> Result : <br>
<input type="text" id="tb3" name="TextBox3">
<br>
<input type="button" name="b1" value="GO" onclick="add_number()">
Just remove the setUpEvents to not have the function out of scope for the inline event handler
Also remove the inline event handler
Use eventListeners instead. I changed the name to id for the button
function add_number() {
var first_number = parseInt(document.getElementById("tb1").value);
var second_number = parseInt(document.getElementById("tb2").value);
var result = first_number + second_number;
document.getElementById("tb3").value = "The-number-that-has-been-computed is "+ result;
};
window.addEventListener("load", function() {
document.getElementById("b1").addEventListener("click", add_number);
});
input { width: 300px }
<div>
<h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1">
<br> Enter Second Number : <br>
<input type="text" id="tb2" name="TextBox2">
<br> Result : <br>
<input type="text" id="tb3" name="TextBox3">
<br>
<input type="button" id="b1" value="GO" />

How do I clear on button click

display = document.getElementById('outputDiv');
display.innerHTML = 'Your Number Is: ';
function clear() {
document.getElementById("outputDiv").innerHTML = "";
}
<input type="button" value="Calculate" onclick="calculator()">
<input type="reset" value="Clear" onclick="clear()">
<div id="outputDiv"></div>
On the reset button clicked, I would like to erase display.innerHTML='Your Number Is: ' + total;
Do not use clear as your function name, because due to the inline event listeners' scope, it confuses with the deprecated Document.clear().
Try some other name:
<input type="reset" value="Clear" onclick = "clearValue()">
<div id="outputDiv"></div>
<script>
var display = document.getElementById('outputDiv');
var total = 500;
display.innerHTML='Your Number Is: ' + total;
function clearValue() {
display.innerHTML = "";
}
</script>
More: Is “clear” a reserved word in Javascript?

How do I tie html inputs into my javascript function?

<!DOCTYPE html>
<html>
<body>
<form>
Birth Year:<br>
<input type="number" name="birthYear">
<br>
Current Year:<br>
<input type="number" name="currentYear">
</form>
<button onclick="calculateAge()">Calculate Age</button>
<div id="output"></div>
<script>
function calculateAge(ghF, xhF) {
var ghF = "birthYear"
var xhF = "currentYear"
return (xhF - ghF);
} {
document.getElementByID("output").innerHTML = text;
};
</script>
</body>
When I click on the button it should print out "You are x age". Where would I add that text? At the moment nothing happens when I click on the button.
getElementById will return the DOM element having id as mentioned argument. .value is property of input element which will give the value of input
Instead of returning value, you must set the innerHTML/innerText after doing subtraction.
Note: You must assign unique id attributes to the element to retrieve DOM element.
function calculateAge() {
var ghF = document.getElementById("birthYear").value;
var xhF = document.getElementById("currentYear").value;
document.getElementById("output").innerHTML = xhF - ghF;
}
<form>
Birth Year:
<br>
<input type="number" name="birthYear" id="birthYear">
<br>Current Year:
<br>
<input type="number" name="currentYear" id="currentYear">
</form>
<button onclick="calculateAge()">Calculate Age</button>
<div id="output"></div>
function calculateAge() {
var ghF = document.getElementById("birthYear").value;
var xhF = document.getElementById("currentYear").value;
document.getElementById("output").innerHTML="You are " +(xhF - ghF) + " age";
}
EXAMPLE
The function is badly formed.
This will do the trick:
function calculateAge() {
var ghF = document.querySelector('[name="birthYear"]').value;
var xhF = document.querySelector('[name="currentYear"]').value;
document.getElementById("output").innerHTML = "You are "+(xhF - ghF)+" age";
}
<form>
Birth Year:
<br>
<input type="number" name="birthYear">
<br>
Current Year:
<br>
<input type="number" name="currentYear">
</form>
<button onclick="calculateAge()">Calculate Age</button>
<div id="output"></div>

Why it is not printing the character in a paragraph?

Write a script that inputs an integer code for a character and displays the corresponding character.
It should print in a paragraph.
function character() {
var input = document.getElementById( "input" );
var code = document.getElementById( "output" ).innerHTML = input;
output.value = String.fromCharCode( code );
}
<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>
A P is not a form element. Also if you use form.fieldName, you need to use name="" instead of id=""; otherwise use document.getElementById for all fields and ignore the form.
You need to use innerHTML or innerText/textContent for a paragraph
document.getElementById("output").innerHTML=...
function character() {
var form = document.getElementById("form");
var code = parseInt(form.input.value,10); // radix 10 to make decimal
document.getElementById("output").innerHTML = String.fromCharCode(code);
}
<form id="form">
<input name="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>
</form>
You have the problem for access to the elements inside a form.
document.getElementById("form").elements['input']
But this only works with form elements, not with other HTML elements.
In this of elements, you can use id or name but for historical reasons.
You have another way here:
function character() {
var input = document.getElementById("input"),
output = document.getElementById("output");
output.innerHTML = String.fromCharCode(parseInt(input.value), 10) || '';
}
<form id="form">
<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>
</form>
Here, this works:
<script>
function character() {
var ChrCode = document.getElementById("input").value;
document.getElementById("output").innerText = ChrCode + " = " + String.fromCharCode(ChrCode);
//output.value = String.fromCharCode( code );
}
</script>
<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" >Output</p>

Get value from textbox and output it

How to get value from myTextbox and output to <p>?
Why I got the error message: [object HTMLInputElement]
<input type="text" id="myTextbox">
<input type="button" id="myButton" value="Run" onclick="myFunction()">
<p id="myOutput"></p>
<script>
function myFunction() {
var x = document.getElementById("myTextbox");
document.getElementById("myOutput").innerHTML = x;
}
</script>
You get this error message because x is an object. This means that he is complex (textbox have value, name, onclick, etc) and don't know how/what to be represented as string. The result is his type [object HTMLInputElement].
To get the value of the object you have to acces x.value property.
function myFunction() {
var x = document.getElementById("myTextbox");
document.getElementById("myOutput").innerHTML = x.value;
}
<input type="text" id="myTextbox">
<input type="button" id="myButton" value="Run" onclick="myFunction()">
<p id="myOutput"></p>
To extract data from control you have to use .value
Try like this
var x = document.getElementById("myTextbox");
document.getElementById("myOutput").innerHTML = x.value;
Access the text in the input using .value:
<input type="text" id="myTextbox">
<input type="button" id="myButton" value="Run" onclick="myFunction()">
<p id="myOutput"></p>
<script>
function myFunction() {
var x = document.getElementById("myTextbox");
document.getElementById("myOutput").innerHTML = x.value;
}
</script>
For fun, you can update the <p> automatically:
<input type="text" id="myTextbox" onchange="myFunction()" onkeyup="this.onchange();">
<p id="myOutput"></p>
<script>
function myFunction() {
var x = document.getElementById("myTextbox");
document.getElementById("myOutput").innerHTML = x.value;
}
</script>
You need to fetch value of textbox and then feed it to the paragraph tag.
You got the error because you are trying to insert textbox in paragraph.
function myFunction() {
var x = document.getElementById("myTextbox");
document.getElementById("myOutput").innerHTML = x.value;
}
<input type="text" id="myTextbox">
<input type="button" id="myButton" value="Run" onclick="myFunction()">
<p id="myOutput"></p>
<input type="text" id="myTextbox">
<input type="button" id="myButton" value="Run" onclick="myFunction()">
<p id="myOutput"></p>
<script>
function myFunction() {
var x = document.querySelector("#myTextbox");
document.querySelector("#myOutput").innerHTML = x.value;
}
</script>
You have missed out the value of the input field, Try this fiddle
var x = document.getElementById("myTextbox").value;

Categories