This question already has answers here:
Difference between ".innerHTML" and ".value" in JS
(4 answers)
Closed 4 years ago.
I know there is something wrong with my code and seeing as this is my hello world project I am very confused. I have read other posts but nothing will work. Can somebody make this work for me??.
The HTML
<html>
<head>
<link rel="stylesheet" href="game.css">
</head>
<body onload="startgame()">
<div id=content>
<center>
<div id=pricediv>
<p id=price></p>
</div>
<div id=buysell>
<button class=buy>Buy</button>
<button class=sell>Sell</button>
<button onclick="startgame()">Start</button>
</div>
</center>
</div>
</body>
The JavaScript
var paused = "false";
function startgame() {
while (paused === false) {
var price = Math.round(Math.random());
document.getElementById("price").innerHTML = price;
}
}
<p> tags don't have value.
Use innerHTML instead.
Also "price" will display word price instead of variable, so drop the quotes:
document.getElementById("price").innerHTML= price
Use .innerHTML instead of .value.
.value is used to set the value of an input element, ie. <input> or <textarea>.
.innerHTMl is used to set the string value in between a html tag, ie. <h1>, <p> or <div>.
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 1 year ago.
I would like to change text in P or other tag in HTML with Java Script
I tried to many different ways.
However, any of those didn't work well.
Console says.
Uncaught TypeError: Cannot set property 'textContent' of null
<script>
//1 document.getElementById("stackoverflow").textContent="newtext";
//2 document.getElementById("stackoverflow").value ="newtext";
//3 document.getElementById("stackoverflow").innerHTML ="newtext";
<script>
<div class="row">
<p id="stackoverflow">I wanna change this text</p>
</div>
Two changes
move your script after element is loaded
remove id from markup
below code works
document.getElementById("stackoverflow").textContent="newtext";
<p id="stackoverflow">I wanna change this text</p>
Check your id there is no space in between.
id is stackoverflow and your giving document.getElementById("stack overflow")
That is completly normal as long as you have two id attributes on the p tag only the first one will be consider.
let p = document.getElementById("stackoverflow");
console.log(p);
<p id id="stackoverflow">This is a sample paragraph</p>
But when you remove the first id it should work as expected
let p = document.getElementById("stackoverflow")
console.log(p);
<p id="stackoverflow">This is a sample paragraph</p>
let p = document.querySelector("p");
console.log(p.id);
<p id id="stackoverflow">This is a sample paragraph</p>
As you can see the idattribute is empty
there are 2 ways ,
1 - if you are doing onload event , u can wrap this within your body tag and call your function
2 - if its onlclick event , call this function onclick eventremove comment on button and onload = "ChangeEvent()"
<!DOCTYPE html>
<html>
<script>
function ChangeEvent() {
document.getElementById("stackoverflow").textContent = "HI";
}
</script>
<body onload="ChangeEvent()">
<p id="stackoverflow">Change</p>
<!-- <button onclick="ChangeEvent()">Clicked</button> -->
</body>
</html>
Place always your <script> tag right before the closing </body> tag
Close properly the </script> tag
<head>
<!-- HEAD stuff goes here. link, meta, title etc -->
</head>
<body>
<div class="row">
<p id="stackoverflow">I wanna change this text</p>
</div>
<!--
SCRIPTs go here before the closing </body>
-->
<script>
document.getElementById("stackoverflow").textContent="newtext";
</script>
</body>
Additional read on parser blocking versus asynchronous javascript
I'm trying to make a template for a copy and paste it have a input and I want to put some text in it and press a button that says update and copy the text from the input to somewhere in the template
My attempt:
<!DOCTYPE HTML>
<html>
<head>
<title>Donovan_D Minecraft - Youtube Description
Template</title>
</head>
<body>
<!--Start Template-->
<div>===================================<br>
My Channel:<br>
https://youtube.com/c/DonovanDMinecraft<br>
===================================<br>
Twitch:<br>
http://twitch.tv/donovan_dmc<br>
Twitter:<br>
http://twitter.com/Donovan_DMC<br>
===================================<br>
Sub2Janabell:<br>
https://youtube.com/channel/UC0NTNba35ADUstIoLm
YLiiA<br>
===================================<br>
My <span style="text-decoration:underline;" id="v">1.9,
1.10, 1.11</span> Skyblock/Guilds Server:<br>
IP: play.mcpsb.co<br>
Server store:<br>
http://store.mcpsb.co<br>
Server Website:<br>
https://www.mcpsb.co<br>
===================================<br>
Thanks for <span style="text-decoration:underline;"
id="sub">970</span> Subscribers! make sure to like,
comment, subscribe, and Stay Awesome!
===================================<br>
<!--End Template-->
<hr>
NOT PART OF TEMPLATE<br>
</div>
<b>Version:</b><br>
Change: <input id="vr"><br>
<button onclick="ver()">Update Version</button><br>
<hr>
<b>Subscriber Count:</b><br>
Change: <input id="cs"><br>
<button onclick="csub()">Update Subscriber
Count</button><br>
<hr>
<script type="text/javascript">
function ver() {
document.getElementById("v").textContent =
document.getElementById("vr").value;
}
function csub() {
document.getElementById("sub").textContent =
document.getElementById("cs").value;
}
</script>
</body>
</html>
[I'm trying to do it twice]
Am I doing somthing wrong here?
Solved, one more thing, is there a way to see if the input is the same as is in the span or if the input is empty? And I only want numbers used in them... is there a way to block other characters/replace themy once they are typed?
Aswell for the subscriber Ammount I want to get live numbers from akshatmittal.com or some other live counts service for youtube Subscribers. Is there a way to get the live Subscriber Count without php, ajax or anything besides javascript and html
The problem is that you are trying to get the data out of your text boxes with .innerHTML. Form-field values need to be gotten with .value.
Additionally, if the data being typed into the text boxes will not contain any HTML that needs to be parsed, you should use .textContent to set that data into your <span>s instead of .innerHTML since there isn't any HTML.
.value is for getting/setting form-field values (checkboxes, radio buttons, text boxes, etc.) or attribute values.
.innerHTML is for getting/setting non-form-field element content that will contain HTML markup. When using this to set content, any HTML in the value being set will be parsed by the browser.
.textContent is for getting/setting non-form-field element content that will not contain HTML markup. HTML markup will be ignored. .textContent is the better choice when no HTML will be gotten/set because it performs better than .innerHTML (doesn't have to parse anything).
<!DOCTYPE HTML>
<html>
<head>
<title>Donovan_D Minecraft - Youtube Description Template</title>
</head>
<body>
<h3>To View HTML Click Here </h3><br>
<!--Start Template-->
<div>===================================<br>
My Channel:<br>
https://youtube.com/c/DonovanDMinecraft<br>
===================================<br>
Twitch:<br>
http://twitch.tv/donovan_dmc<br>
Twitter:<br>
http://twitter.com/Donovan_DMC<br>
===================================<br>
Sub2Janabell:<br>
https://youtube.com/channel/UC0NTNba35ADUstIoLmYLiiA<br>
===================================<br>
My <span style="text-decoration:underline;" id="v">1.9, 1.10, 1.11</span> Skyblock/Guilds Server:<br>
IP: play.mcpsb.co<br>
Server store:<br>
http://store.mcpsb.co<br>
Server Website:<br>
https://www.mcpsb.co<br>
===================================<br>
Thanks for <span style="text-decoration:underline;" id="sub">970</span> Subscribers! make sure to like, comment, subscribe, and Stay Awesome!
===================================<br>
<!--End Template-->
<hr>
NOT PART OF TEMPLATE<br>
</div>
<b>Version:</b><br>
Change: <input id="vr"><br>
<button onclick="ver()">Update Version</button><br>
<hr>
<b>Subscriber Count:</b><br>
Change: <input id="cs"><br>
<button onclick="csub()">Update Subscriber Count</button><br>
<hr>
<script type="text/javascript">
// Get/set form-field values using the .value property
// Get/set non-form-field values with either .textContent or .innerHTML
function ver() {
document.getElementById("v").textContent = document.getElementById("vr").value;
}
function csub() {
document.getElementById("sub").textContent = document.getElementById("cs").value;
}
</script>
</body>
</html>
Try the following script changes to get the input value and change the textContent of the target element.
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
<script type="text/javascript">
function ver() {
document.getElementById("v").textContent = document.getElementById("vr").value;
}
function csub() {
document.getElementById("sub").textContent = document.getElementById("cs").value;
}
</script>
This question already has answers here:
How to display JavaScript variables in a HTML page without document.write
(9 answers)
Closed 8 years ago.
Hi I'm working on a personal website and trying to make a comment box.
its still very basic but I have a button that calls a function which stores the values of the name of the person and the comment itself, and then hopefully output it somewhere (I don't care where yet, just want to see an output)
this is a snippet of what I got so far but its not doing anything, and I don't know what I'm doing either ;) so please rescue me
<section class="body_right_comment_input">
<p> Name: </p>
<input type="text" id="name_input"/> </br>
<p> Comment:</p>
<textarea id="comment_input"></textarea>
<button onclick="myFunction()">Click me</button>
</section>
<script type="text/javascript">
function myFunction() {
var commentName = document.getElementById("name_input").value;
var commentValue= document.getElementById("comment_input").value;
document.write(commentName)
document.write(commentValue)
}
</script>
To output something to somewhere in your HTML, you can use innerHTML, which is like this:
document.getElementById('myAnchor').innerHTML="W3Schools";
User innerHTML to output: http://jsfiddle.net/z4hjv/
<section class="body_right_comment_input">
<p>Name:</p>
<input type="text" id="name_input" />
</br>
<p>Comment:</p>
<textarea id="comment_input"></textarea>
<button onclick="myFunction()">Click me</button>
<span id="comment_result"></span>
</section>
function myFunction() {
var commentName = document.getElementById("name_input").value;
var commentValue = document.getElementById("comment_input").value;
document.getElementById("comment_result").innerHTML = commentName + commentValue;
}
FALSE ALARM! my closing bracket was in the wrong place for the function!
However, feel free to answer and suggest a better way to do this or how I can output this into the html itself
This question already has answers here:
Append text to textarea with javascript
(3 answers)
Closed 8 years ago.
How can we pass a string from js file to HTML? Assume I have declared a string in privacy.js and I need to get in to my html text area.
I have imputed the script file:
<script type="text/javascript" src="js/privacy.js"></script>
I am assinging string value in to a div
document.getElementById("privacy_text").innerHTML = privacy_string;
I need the Sting value in text area
<textarea class="terms" readonly="readonly">
<div id="privacy_text"></div>
</textarea>
Don't embed a div in a textarea and rather assign it it's own id:
<textarea id="privacy_textarea"></textarea>
And then try to assign a value to it:
document.getElementById("privacy_textarea").value = privacy_string;
Here is a working example.
You could as well use innerHTML but textarea is a form element so I'd recommend to use value.
Give your textarea an ID like, this
<textarea class="terms" readonly="readonly" id="theTextarea">
</textarea>
and then use the following JavaScript to select it and change the value:
document.getElementById("theTextarea").value = "theValue";
If you have access to jQuery, you can use:
$("#theTextarea").val("theValue");
Fiddle
Either way, a div can't go inside a textarea.
If you can assign an ID to your textarea...
<textarea id="myTextArea"></textarea>
Then this should work:
document.getElementById("myTextArea").value = privacy_string;
Give that textarea an ID , then set value to text area like document.getElementById('your text area id').value=privacy_text; from javascript file.
eg:
<script>
var privacy_text="your string";
document.getElementById(textId).value=privacy_text;
</script>
<textarea id="textId"></textarea>
Try this:
document.querySelector(".terms").value = 'someValue';
You can find HTML elements from javascript using document.querySelector by using different type of "query filters" in the above example it is finding the text area by CSS class using .cssClass.
Regarding the div inside your textarea object please note that is not possible. You can only non-HTML text.
<html>
<head>
<script type="text/javascript">
function printValue()
{
var name="Anand";
document.getElementById("textbox1").innerHTML=name;
}
</script>
</head>
<body>
<input type="text" id="textbox1"/>
<input type="button" value="GetText" onclick="PrintValue()"/>
</body>
</html>
Instead of .innerHtml, use this:
document.getElementById("privacy_text").value= "Hello";
Here is my code:
<html>
<head>
<script type="text/javascript">
var x= document.getElementById("2").value;
document.getElementById("1").innerHtml = x;
</script>
</head>
<body>
<p hidden="hidden" id="2">This paragraph should be hidden.</p>
<p>This is a visible paragraph.</p>
<p><b>Note:</b> The hidden attribute is not supported in IE.</p>
<p id="1"></p>
</body>
</html>
in this code i have a hidden tag as you can see. I want that the javascript code read text value of the p tag with an id 2 and then print the same value to other <p> tag wiht id="1". But this is not working. Earlier i even tried to use nodeValue but also this is not working and when i checked out in google developer tool then it was showing an error as following:
Cannot read property 'value/nodeValue' of null
please note:
after a quick experiment i noted that after adding a event handler <body onload="y();>" there was no error but there was no expected result!
please help!
hidden is an input element type, not a p attribute:
<input type="hidden" id="2" value="This input should be hidden." />
There are three problems:
there is no innerHtml, innerHTML is the correct syntax.
the hidden "p" does not have a value, it is not an input field. use innerHTML for accessing it.
your javascript code runs before the browser knows about paragraps, so they don't exist when you want them to be accessed. put javascript after the paragraphs or run the code after the page is loaded.
this should work:
<html>
<head>
</head>
<body>
<p hidden="hidden" id="2">This paragraph should be hidden.</p>
<p>This is a visible paragraph.</p>
<p><b>Note:</b> The hidden attribute is not supported in IE.</p>
<p id="1"></p>
<script type="text/javascript">
var x= document.getElementById("2").innerHTML;
document.getElementById("1").innerHTML = x;
</script>
</body>
</html>
Don't use numbers for ID.
Try something like <p id="hello"></p>
I think you need to change your tag to then you can set a CSS class with .hidden { display:none; }.
Wrap your Javascript in a function and call it when you need to or go back to your
Also as Maaz said, try not to use numbers in your ID's.
var hiddenValue = document.getElementById('2').innerHTML;
document.getElementById('1').innerHTML = hiddenValue;
The problem with this (and if you try and style it also) is that classes and ID's should not start with (or include) numbers.
Rename your ID's to one and two and then update your javascript accordingly.
e.g
<p id="one">Some stuff</p>
Also hidden cannot be used with a p element as it's for inputs only.
You're better off using display:none; in CSS.
If you NEED to access it via css as a number, you can use
[id='1']{
/*code*/
}
but your javascript still wont work.
As James has pointed out, using numbers for ID's is perfectly valid in HTML5.