I have created a javascript code that lets the user input something then it should display after the input but my display seems to not work at all, I am using document.getElementById to display the array content per input but it is not working.
Here is my complete code:
<html>
<meta charset="UTF-8">
<head>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
<p id = "display">
Input:
<input type="text" id="input">
<input type="button" value="GO" onClick="press(input.value)">
<script>
var sample = new Array();
function press(Number)
{
sample[index] = Number;
document.getElementById("display").InnerHTML += sample[index] + " ";
index++;
}
</script>
</body>
</html>
What seems to be the problem? I am still learning the basics please bear with me.
The problem is with "InnerHTML". The correct syntax is "innerHTML" with small "i".
change
document.getElementById("display").InnerHTML
to
document.getElementById("display").innerHTML
(note the lowercase i
Here's the fiddle
I made two tiny changes that seem to make this work.
First, close the <p> tag so that when you set innerHtml it does not include the inputs.
Second, change InnerHHTML to innerHTML. Methods and properties are case sensitive.
<p id = "display"></p>
Input:
<input type="text" id="input">
<input type="button" value="GO" onClick="press(input.value)">
<script>
var sample = new Array();
function press(Number)
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + " ";
index++;
}
</script>
First your <p> is not complete;
<p id = "display"></p>
Second its:
document.getElementById("display").innerHTML += sample[index] + " ";
Related
Hey so I am new to using JS and HTML and still practicing the language, I am trying to print out the user name of both players but without using alert. I want to print the player's names and later going to change it up using CSS but having trouble with the simplest way of printing user inputs I have this so far and was wondering why it is not working, any help will be appreciated.
function welcome(){
var first = document.getElementById("FirstName").value;
var last = document.getElementById("LastName").value;
var Print_name = "Welcome " + first +" "+ last;
console.log(Print_name);
}
<!DOCTYPE html>
<html>
<head>
<title>Print Names</title>
</head>
<body>
<form method="get">
<label for="Player1Name">Player 1 Name:</label>
<input type="text" id="Player1Name" name="player1Name" placeholder="Name"><br>
<label for="Player2Name">Player 2 Name:</label>
<input type="text" id="Player2Name" name="player2Name" placeholder="Name"><br>
<input type="submit" value="Submit" class="btn">
</form>
<script>
/*javascript code here*/
</script>
</body>
</html>
You should find an HTML element (with id="Player1Name") and (with id="Player2Name").
Try it code in HTML
<input type="submit" value="Submit" class="btn" onclick="welcome()">
Try it code in JavaScript
function welcome(){
var first = document.getElementById("Player1Name").value;
var last = document.getElementById("Player2Name").value;
var Print_name = "Welcome " + first +" "+ last;
alert(Print_name);
}
your document.getElementById is referencing the wrong Id.
So if you text field is defined as
<input type="text" **id="Player1Name"** name="player1Name" placeholder="Name">
Then what you should be doing is document.getElementById("Player1Name").value
The same goes with the Player2Name field.
I know that this might be simple, but I was trying to create some sort of system in HTML using Javascript, that when you input a number in the input tag it multiplies it with another number, them outputs the number in another input tag. But for some strange reason, I can't really find out how to do it
<!DOCTYPE html>
<html>
<head>
<script>
var test = document.getElementById('input');
function myFunction() {
document.getElementById('output').value = test + 20;
}
</script>
</head>
<body>
Input: <input id="input">
<button onclick="myFunction()">Submit</button>
<br><br>
<input id="output" type="text">
</body>
</html>
Btw, I don't know how to use JQuery or those types of things, so could you write it in simple HTML?
You should set the value property of an input rather than innerHTML:
Also use parseInt so that you can sum the numbers as input.value will be a string.
function myFunction() {
document.getElementById('output').value = parseInt(test.value, 10) + 20;
}
Here is a working demo: https://jsfiddle.net/usmanmunir/1uv9cqys/8/
function myFunction() {
var test = document.getElementById('input').value;
document.getElementById('output').value = parseInt(test) * 20;
}
Input: <input id="input" type="number">
<button onclick="myFunction()">Submit</button>
<br><br>
Final : <input id="output" type="text">
So i'm trying to make a simple comments page but I can't seem to get it working :/ Is there something wrong with the code? I'm trying to use only javascript since I have not learned JQuery
function action(){
var input = document.getElementById('header').value;
localStorage.setItem('comment',input);
document.getElementById('header').value=" ";
var getInput = localStorage.getItem('comment');
var date = Date();
var parag = document.createElement('P')
parag.innerText=getInput;
document.getElementById('hello').appendChild=parag;
}
<textarea id='header' type='text' rows='6' cols='100' name='server'>
</textarea>
<input onclick="action();" type="button" value='Comment'>
<span id='hello'></span>
document.getElementById('hello').appendChild=parag;
You are not calling the appendChild function properly. You are assigning instead. You should do
document.getElementById('hello').appendChild(parag);
Note: in below codes I removed the local storage because of security issues.
--
function action(){
var input = document.getElementById('header').value;
//localStorage.setItem('comment',input);
document.getElementById('header').value=" ";
// var getInput = localStorage.getItem('comment');
var date = Date();
var parag = document.createElement('P')
parag.innerText="getInput";
document.getElementById('hello').appendChild(parag);
}
<textarea id='header' type='text' rows='6' cols='100' name='server'>
</textarea>
<input onclick="action();" type="button" value='Comment'>
<span id='hello'></span>
Just change you append child to :
document.getElementById('hello').appendChild(parag);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<script type="text/javascript" charset="utf-8">
function action(){
var input = document.getElementById('header').value;
localStorage.setItem('comment',input);
document.getElementById('header').value=" ";
var getInput = localStorage.getItem('comment');
var parag = document.createElement('P')
parag.innerText=getInput;
document.getElementById('hello').appendChild(parag);
}
</script>
<body>
<textarea id='header' type='text' rows='6' cols='100' name='server'>
</textarea>
<input onclick="action();" type="button" value='Comment'>
<div id='hello'></div>
</body>
</html>
The syntax for Node.appendChild is wrong.
You can see how to use it in the DOM Living Standard.
The appendChild(node) method, when invoked, must return the result of appending node to context object.
You should also consider keeping a reference to header instead of querying the DOM twice.
What am i doing wrong? According to the textbook example this is supposed to be sufficient code, but I get NaN when running it in a browser.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
<html>
<head>
<title>test</title>
</head>
<body>
<p>Vekt: <input type="text" id="txtVekt" /></p>
<p>Hoyde: <input type="text" id="txtHoyde" /></p>
<button id="btnBeregn">Beregn</button>
<p id="resultat"></p>
<script>
window.onload = beregn();
function beregn(){
var hoyde = document.getElementById("txtHoyde").value;
var vekt = document.getElementById("txtVekt").value;
var bmi = vekt / (hoyde * vekt);
document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
}
</script>
</body>
</html>
Your values are not initialized when you first run the function
There's really no need to run the function onload, especially
since your values aren't initialized. Note that my code removes the onload invocation.
You can just run the calculation when the button is clicked. You might also want to add some validation before you run the function, but I'll leave that exercise to you.
<body>
<p>Vekt: <input type="text" id="txtVekt" /></p>
<p>Hoyde: <input type="text" id="txtHoyde" /></p>
<button id="btnBeregn" onclick="beregn();" >Beregn</button>
<p id="resultat"></p>
<script>
function beregn(){
var hoyde = document.getElementById("txtHoyde").value;
var vekt = document.getElementById("txtVekt").value;
//this assumes your inputs are valid numbers...
var bmi = vekt / (hoyde * vekt);
document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
}
</script>
</body>
hoyde and vekt do not have any value when the page loads since the inputs are empty, so there is no reason why bmi should give you anything other than NaN.
You need to either give those inputs a default value (probably 1 to begin) and then rerun the begregn function whenever the button is clicked:
<p>Vekt: <input type="text" id="txtVekt" value=1/></p>
<p>Hoyde: <input type="text" id="txtHoyde" value=1/></p>
<button id="btnBeregn" onclick="begregn()">Beregn</button>
Or just don't run begregn on window load, but only when the button is clicked
window.onload runs... on window load. :)
Change window.onload = beregn(); to:
var btn = document.getElementById("btnBeregn");
btn.addEventListener("click", beregn);
I am trying to complete a simple exercise to test my JavaScript skills at processing input elements from a form. The object of the game is to retrieve current values from the form input elements, make a story from them, and output that story in the 'story' div. However, when I click the 'Lib It!' button, the function is not getting called, and the text is not being replaced. Any ideas as to why this is not happening?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Mad Libs</h1>
<ul>
<li>Noun: <input type="text" id="noun">
<li>Adjective: <input type="text" id="adjective">
<li>Someone's Name: <input type="text" id="person">
</ul>
<button id="lib-button" onclick="makeMadLib">Lib it!</button>
<div id="story">Placeholder Text</div>
<script type="text/javascript" src="exercises.js"></script>
</body>
</html>
JavaScript:
function makeMadLib(){
var noun = document.getElementById("noun").value;
var adjective = document.getElementById("adjective").value;
var person = document.getElementById("person").value;
var story = document.getElementById(story);
story.firstChild.nodeValue = person + "likes taking photographs of" + adjective + noun;
}
Thanks,
Robert
London, Uk
First we forgot to use parentheses when calling the madLib function. Change onclick="makeMadLib" to onclick="makeMadLib()". Then in our madlib function we need to add quotes around the story in document.getElementById() : var story = document.getElementById("story");. Finally to output our text all we have to do is use innerHTML.
HTML
...
<button id="lib-button" onclick="makeMadLib()">Lib it!</button>
...
JS
...
var story = document.getElementById("story");
....
story.innerHTML = person + " likes taking photographs of " + adjective + " " + noun;