I'm trying to change the text in an h2 element with the simplest code but don't get what I'm doing wrong :
html
<h2 id="tries">Number of tries : 0</h2>
javascript
document.getElementById("tries").innerHTML = 'new text';
There is nothing wrong wiht that. You asked JS to replace the innerHTML, and JS done that.
If you want to change only the value after the ":" then here is an example where I placed a span into the the p and I change the innerHTML of this span.
function changeText(value) {
//this is the point
document.getElementById("tries-value").innerHTML = value;
}
const input = document.querySelector("input");
input.addEventListener("change", (e) => changeText(e.target.value));
changeText(input.value)
<h2 id="tries">Number of tries : <span id="tries-value">0</span></h2>
<label for="input-number">Change the input:</label>
<input id="input-number" value="10" type="number" />
I just guess you did that and as you can see, it will fail
<!doctype html>
<html>
<head>
<script>
document.getElementById("tries").innerHTML = 'new text';
</script>
</head>
<body>
<h2 id="tries">Number of tries : 0</h2>
</body>
</html>
You can first do DOM Operations if the DOM is actually loaded, so you just listen to the window.load event and it will work
<!doctype html>
<html>
<head>
<script>
window.addEventListener('load', function () {
document.getElementById("tries").innerHTML = 'new text';
});
</script>
</head>
<body>
<h2 id="tries">Number of tries : 0</h2>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</head>
<body>
<div id="passage">hello</div>
<div id="question"></div>
<div id="answers"></div>
</body>
</html>
Why is document.getElementById("passage").innerHTML = "Paragraph changed!" not working for me? I just end up with a blank screen, not even the original "hello".
Your script is called before the element is loaded, try calling the script after loading element
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="passage">hello</div>
<div id="question"></div>
<div id="answers"></div>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</body>
</html>
If you check the console, you can see an error
Uncaught TypeError: Cannot set property 'innerHTML' of null
That is the HTML page is parsed and executed top down.
So, it can't identify what is the element you are mentioning.
So, you should either use an EventListener or place the script just before the end of body tag
Method 1 Event Listener
<!DOCTYPE html>
<html>
<head>
</head>
<script>
window.onload=function(){
document.getElementById("passage").innerHTML = "Paragraph changed!";
};
</script>
<body>
<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>
</body>
</html>
Method 2 : script is just above body tag
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</body>
</html>
You script should be executed once the page is loaded.
Otherwise all elements of the page may not be still attached to the dom when you refer to them.
Rather than moving the script after the element declaration that may be error prone (you should always be aware of the order of script), you could use
event designed to be executed after the dom is totally loaded.
For example onload attribute of body :
<body onload='document.getElementById("passage").innerHTML = "Paragraph changed!";'>
Your script is calling before element is loaded.
Try
$(document).ready(function()
{
document.getElementById("passage").innerHTML = "Paragraph changed!";
});
JS:
(function(){
document.getElementById("passage").innerHTML = "Paragraph changed!";
})
The following code does not work
<!DOCTYPE html>
<html>
<body>
<input type="text" id="searchTxt"/>
<input type="button" id="run"/>
<script>
$(document).ready(function() {
$("#run").click(function(){
var input = document.getElementById("searchTxt");
alert(input);
});
});
</script>
</body>
</html>
How can I get and print the value in the text box ?
You have to include the jQuery JS file inside your <head> tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
.value on the element return by the getElementById function
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(mypara)
{
mypara.innerHTML="Ooops!";
}
</script>
</head>
<body>
<script>var mypara = document.getElementById("para1");</script>
<h1 onclick="changetext(mypara)">Click this text to change the content of following paragraph</h1>
<p id="para1"> this is a paragraph I would like to change </p>
</body>
</html>
I would like to let user to click the heading to change the content of the paragraph, but I don't know the correct way of coding that. How to send the "mypara" parameter to myFunction() in HTML?
Your example almost works - the problem is when you execute this line:
var mypara = document.getElementById("para1");
The element you're refering to does not yet exist. You could fix it by just going inline:
<h1 onclick="changetext(document.getElementById('para1'))">...</h1>
Live example for this approach: http://jsfiddle.net/Gw5CG/2/
or perhaps just pass the id to the method:
<h1 onclick="changetext('para1')">...</h1>
and change the method to do the getElementById:
function changetext(mypara)
{
document.getElementById(mypara).innerHTML="Ooops!";
}
Live example for this approach: http://jsfiddle.net/Gw5CG/1/
The element doesn't exist yet when you're trying to get it.
Why not just get it in the event handler
<!DOCTYPE html>
<html>
<head>
<script>
function changetext() {
document.getElementById("para1").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext()">Click this text to change the content of following paragraph</h1>
<p id="para1">this is a paragraph I would like to change</p>
</body>
</html>
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!
I am new to Javascript. I am facing a problem with global variables. I can't figure out that why the global variables are not working as the code looks ok. Please Help me solve this problem.
I will breifly explain the code first.I have some text on a page which changes to text field when clicked. When I define the variables inside the functions body the code starts working fine. When these variables are defined globally as in the following code, the console displays this error: the variable is not defined. Here my code:
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript" language="javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');
function change()
{
textboxNode.setAttribute('value', textValue);
textNode.style.display = 'none';
textboxNode.setAttribute('type','text');
doneButton.setAttribute('type','button');
}
function changeBack()
{
textNode.firstChild.nodeValue = textboxNode.value;
textNode.style.display = 'block';
textboxNode.setAttribute('type', 'hidden');
doneButton.setAttribute('type','hidden');
}
</script>
</head>
<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
</body>
</html>
Please Help!
Thanks in Advance.
As Adam said, the issue is that you are running javascript on the document before the document has been loaded. There are a number of ways to fix this, but the simplest is to just move your javascript code to the end of the body so the document has already been parsed and is ready before your code runs like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
</head>
<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
<script type="text/javascript" language="javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');
function change()
{
textboxNode.setAttribute('value', textValue);
textNode.style.display = 'none';
textboxNode.setAttribute('type','text');
doneButton.setAttribute('type','button');
}
function changeBack()
{
textNode.firstChild.nodeValue = textboxNode.value;
textNode.style.display = 'block';
textboxNode.setAttribute('type', 'hidden');
doneButton.setAttribute('type','hidden');
}
</script>
</body>
</html>
The error is likely caused by grabbing DOM nodes before they're ready:
var textNode = document.getElementById('text');
This is likely returning either null or undefined since that DOM element hasn't been created yet.
Putting this script at the end of your body should solve your problem.
Or, if you'd like to use jQuery, you can do all this in
$(document).ready(function() {
var textNode = document.getElementById('text');
}