I am trying to learn JavaScript. I have a question which might sound silly, but I would really appreciate the help.
I have the following code:
JavaScript
<script type="text/javascript">
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML = Name;
}
</script>
HTML:
<body>
<input type="text" id="name" placeholder="enter">
<br>
<button id="btn" onclick="fn()">click</button>
<div>
<p id="result"></p>
</div>
</body>
I want to save every entry in of my textbox. Right If I am trying enter a new data input box, it replaces the previous data.
This will solve your problem;
<script type="text/javascript">
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML += Name;
}
</script>
notice the += instead of =;
it will get the previous value first, then add the new value to the end of it;
same as:
document.getElementById('result').innerHTML = document.getElementById('result').innerHTML + Name;
In your JavaScript code only the last attempt is saved. To save all the attempts try the following:
<script type="text/javascript">
function fn(){
var Name = document.getElementById('name').value;
document.getElementById('result').innerHTML += Name +'<br/>';
}
</script>
Every time button is clicked it will add new line symbol and new value to your result area, not relace previous try.
Related
Please let me know what I am doing wrong, I have tried to debug but it hasn't been working. I want to enter information into a text field and then display that after clicking a button.
<!DOCTYPE html>
<html>
<head>
<script type = 'text/javascript'>
var name; //name
console.log("hi from script");
function getName() { //get name
return document.getElementById("name").value;
}
function display() { //get the name and display
name = getName();
alert(name);
}
document.getElementById("Submit").onclick = display();
</script>
</head>
<body>
<form id='form'method = 'post'>
<p> Name: <input type="text" id="name"/></p>
<p><input id ="Submit" type = "button" value = 'Submit' /></p>
</form>
</body>
</html>
The problem is that you are making use of a <form> POST. The default behaviour is to navigate away from the page (or refresh if you're posting to the same page), and doing so would mean that the script cannot execute any further functionality. To prevent this, you need to use .preventDefault() to prevent the default behaviour of the form submission.
In order to do this, I've changed your .onclick = display() functionality to add an event listener on the click, which prevents the default behaviour, and then calls display():
.addEventListener("click", function(event) {
event.preventDefault();
display();
});
Adding this provides the following working example:
var name; //name
console.log("hi from script");
function getName() { //get name
return document.getElementById("name").value;
}
function display() { //get the name and display
name = getName();
alert(name);
}
document.getElementById("Submit").addEventListener("click", function(event) {
event.preventDefault();
display();
});
<form id='form' method='post'>
<p> Name: <input type="text" id="name" /></p>
<p><input id="Submit" type="button" value='Submit' /></p>
</form>
Hope this helps! :)
Create an empty p tag and give it an id, then call the id and .html to input the text into the field. Like so
so get your html ready
<p><span id="youridhere"><p>
then add this to your function instead of using alert.
$('#youridhere').html(name);
that should do it
here's a jsfiddle of what I think you are looking for
https://jsfiddle.net/uzdt715L/
$('button').click(function(){
var thing = $('#whatever').val();
$('#final').html(thing);
});
You need to update your click handler syntax. The following should work for you,
document.getElementById("Submit").addEventListener("click", display);
See this related question - addEventListener vs onclick
Your code is not really wrong.
But because the JavaScript is placed before htm code, so the onlick event is not registered.
You must replace
document.getElementById("Submit").onclick = display();
With
document.onload = function() {
document.getElementById("Submit").onclick = display();
}
Sorry for the formatting as I'm answering via mobile.
I need a help on the below code. I need users enter their contents into placeholder, not in the script, so when the user click the button, the result can show up.
In this example, "my test.asp?name=ståle&car=saab" is the sample content, but I need to put them into placeholder, not in the script.
I change InnerHTML with value but it seems not working. Can anyone help? Thank you so much!
<body>
<p>Enter foregin character and click covert</p>
<input id="demo" placeholder="Keyword">
<button onclick="myFunction()">Convert</button>
<p id="demo"></p>
<script>
function myFunction() {
var uri = "my test.asp?name=ståle&car=saab";
var res = encodeURI(uri);
document.getElementById("demo").innerHTML = res;
}
</script>
You can set any value in the placeholder using script.
document.getElementById("xyz").placeholder = "Any value";
Check this out at:
http://www.w3schools.com/jsref/prop_text_placeholder.asp
<p>Enter foreign character and click convert</p>
<input id="demo1" placeholder="Keyword"> <!-- different id from <p> tag -->
<button onclick="myFunction()">Convert</button>
<p id="demo2"></p> <!-- different id from <input> tag -->
<script>
function myFunction() {
var uri = document.getElementById("demo1").value; // This was missing, get the value the user has typed
var res = encodeURI(uri);
document.getElementById("demo2").innerHTML = res;
}
</script>
See this JSFiddle
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
So basically I'm trying to get a name that is entered in a text input box in the body to show in an alert in script but it always displays the name as null or if I put .value on the end of the document.getElementById("name") it doesn't display anything. I'm confused because in all the tutorials I've seen it always says to just do it like I did it...
Here's the code I was using:
<!DOCTYPE html>
<html>
<script>
var name = document.getElementById("name");
function showName()
{
alert ("Your name: " + name)
}
</script>
<body>
<form name = "form">
Please enter your full name <input type = "text" id = "name"><br>
<input type = "button" value = "show name" onclick = "showName()">
</form>
</body>
</html>
You need to do some adjustments to your code:
<!DOCTYPE html>
<html>
<body>
<form name = "form">
Please enter your full name <input type = "text" id = "name"><br>
<input type = "button" value = "show name" onclick = "showName()">
</form>
<script>
function showName()
{
var name = document.getElementById("name");
alert ("Your name: " + name.value);
}
</script>
</body>
</html>
First: Put your function to end of your html code to ensure that you can read the element "name".
Second: You need to get the element just when the user clicks on the button, if you get the element before you can't get the value if this exists.
Third: When you get the element, you are getting an object, in order to get the value, you need to call the property value of this object.
Fourth: Always validate if your variables have content or exist.
Try this
<!DOCTYPE html>
<html>
<body>
<form name = "form">
Please enter your full name <input type="text" id="name" value=""><br>
<input type = "button" value="show name" onclick="showName()">
</form>
<script>
function showName() {
var name = document.getElementById("name").value;
alert ("Your name: " + name);
}
</script>
</body>
</html>
function showName()
{
var name = document.getElementById("name");
alert ("Your name: " + name.value);
}
Something like this.
You need to .value because you want input value and also move your get id name into your function .Because your getting id is outside of function so it will always return undefined coz of initial state value is nothing..
<script>
function showName()
{
var name = document.getElementById("name");
alert ("Your name: " + name.value);
}
</script>
You need to put your variable declaration var name = document.getElementById("name"); inside your function function showName() so when your variable gets the value the real value is assigned.
check this fiddle
hope it helps
Instead of
var name = document.getElementById("name");
use
var name = document.getElementById("name").value;
alert('Your name: ' + name);
Hope this helps !
The most basic example, where say I got a variable called name. What I want to do is to put the value of my tag paragraph to the name variable.
That is, I want the value of name change in html as soon as it is changed in JavaScript.
Btw, I created a refresh name method, which works perfectly, but I need a better alternative.
<html>
<head></head>
<body>
<script>
var droid = new Android();
var name = "Player";
function getName() {
name = prompt("Enter Name");
}
function putName() {
var elm = document.getElementById("ntag");
elm.innerHTML = name;
}
</script>
<p id="ntag"></p>
<input type="button" onclick="putName();" value="Refresh Name"/>
<input type="button" onclick="getName();" value="Change Name"/>
<br>
<input type="button" onclick="droid.dismiss();" value="Exit"/>
</body>
</html>
As I understand from you question, you want to minimize the number of buttons and event-handlers.
You are currently using two buttons to prompt for input and change the content. You can get rid of your putName function and the associated button for that and change the content within the first one itself.
You should ideally use innerText instead of innerHTML in this case.
You code will somewhat look like this snippet:
Snippet:
function getName() {
name = prompt("Enter Name");
document.getElementById("ntag").innerText = name;
}
<p id="ntag"></p>
<input type="button" onclick="getName();" value="Change Name"/>
I'm trying to get a text box where you can enter a number and then you click the button and it will multiply it by two and display that result in theDiv. Right now, it opens a new page for the result, and displays the entered number, not the number times two. What am I doing wrong? Beginner here, please be gentle! Thank you!!
<html>
<script>
function doubleit()
{
var theNumber=document.write(parseFloat(document.getElementById('theInput').value));
var doubleNumber =document.getElementById('theNumber')*2;
document.getElementById('theDiv').innerHTML(document.getElementById('doubleNumber'))
}
</script>
<body>
<p>Value: <input type="text" id="theInput" value="" size=10>
<input type="button" id="theButton" value="click me!" onclick="doubleit()"></p>
<div id="theDiv"></div>
</body>
</html>
It's the call to document.write that is replacing the page. Remove it:
var theNumber=parseFloat(document.getElementById('theInput').value);
When you want the value of a variable, you shouldn't use document.getElementById:
var doubleNumber = theNumber * 2;
innerHTML is a property, not a method:
document.getElementById('theDiv').innerHTML = doubleNumber;
var doubleNumber = Number(theNumber, 10)*2;
document.getElementById('theDiv').innerHTML(doubleNumber);
Something like this
function doubleit()
{
var theNumber=parseFloat(document.getElementById('theInput').value) * 2;
document.getElementById('theDiv').innerHTML = theNumber;
}
Try This Solution :
Use the id of your button to call the function to calculate result.
theButton.onclick = function doubleit()
{
//Simply get the number from user and parse it as float.
var theNumber=parseFloat(document.getElementById('theInput').value);
//Multiply it with 2
var doubleNumber =theNumber*2;
//Display the result in another div
document.getElementById('theDiv').innerHTML = doubleNumber;
}
Demo