<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction(demox)">Click me</button>
<p id="demo"></p>
<p id="demox"></p>
<script>
function myFunction(cat) {
var dog = document.getElementById( cat);
dog.innerHTML = "Hello World";
}
</script>
</body>
</html>
I am trying to pass an id value of "demox" to a js function to display some text with an onclick event, but it doesn't seem to work. what is the problem here?
You can find script modified which solve your issue here.
https://jsbin.com/yitovikete/edit?html,output
Generally, I would suggest you to add <script> tag within the header of your HTML page like this:
https://jsbin.com/yitovikete/1/edit?html,output
This is good when you need to do something while the body is loading, or want to maybe make some ajax requests.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction('demox')">Click me</button>
<p id="demo"></p>
<p id="demox"></p>
<script>
function myFunction(cat) {
var dog = document.getElementById( cat);
dog.innerHTML = "Hello World";
}
</script>
</body>
</html>
Related
I am trying to create an alert function using the getElementById and it is not working. This is a very simple button i am trying to create but obviously its not simple for a noob like me. Thank you for all your help in advance. This is what i currently have:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick= "click()" style="color:green;" >click</button>
<script>
function click() {
document.getElementById("alerting").innerHTML = "I am an alert";
}
</script>
</body>
</html>
You need to add an element with id="alerting" where your text will appear. Otherwise document.getElementById("alerting") will return null and calling innerHTML on it will throw error.
<body>
<button onclick= "myFunction()" style="font-size:25px;" >click</button>
<p id="alerting">element with alerting id. value will change here</p>
<script>
function myFunction() {
document.getElementById("alerting").innerHTML = "Hello World";
}
</script>
</body>
You dont have any html elements with id="alerting" into which you can set the innerHTML.
If you want a popup alert instead of doing the innerHTML thing... just do:
alert("I am an alert");
Also of note... some browsers wont like functions named: "click".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>alert</title>
</head>
<body>
<button onclick="someFunction()" style="color:green;" >Click Me</button>
<script>
function someFunction()
{
alert("I am an alert");
}
</script>
</body>
</html>
I was running some basic test cases with document.write() which deletes all existing HTML, in the head tag. Desired output is obtained only when I place the script in <body> tag.
Ran the script in body with success. But script is resulting in issues when used in <head> tag.
<html>
<head>
<title>Output</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Text";
document.write(5 + 6);
}
</script>
</head>
<body>
<p id="demo">
<button onclick="myFunction()">Touch me</button>
</p>
</body>
</html>
Expected output is -
Text
11.
But only 11 is visible.
document.write will erase everything which you had earlier. Your are initially setting the innerHTML of element with id demo to Text, but then you are using document.write, which will completely delete your existing html and replace it will 11. You can append the sum of numbers to the Text.
function myFunction() {
const num = 5 + 6;
document.getElementById("demo").innerHTML = "Text " + num;
//document.write(5 + 6);
}
<p id="demo">
<button onclick="myFunction()">Touch me</button>
</p>
If you do not have any html code, use textContent instead of innerHTML.
function myFunction() {
document.getElementById("demo").textContent = `Text ${5+6}`;
}
<p id="demo">
<button onclick="myFunction()">Touch me</button>
</p>
Placing the script in <head> is not an issue.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML
Try appending the content using innerHTML attribute itself.
More Info on write :
https://developer.mozilla.org/en-US/docs/Web/API/Document/write
You can pass the string Text to the write function along with those numbers
document.write(`Text ${5+6}`)
<html>
<head>
<title>Output</title>
<script>
function myFunction() {
document.write(`Text ${5+6}`);
}
</script>
</head>
<body>
<p id="demo">
<button onclick="myFunction()">Touch me</button>
</p>
</body>
</html>
Im relatively new to HTML and Javascript , Im currently in functions right now.
I tried this code but it didn't print anything. if I use a button and keep the document.get... inside a function it works why?
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Javasc";
</script>
<p>
hey
</p>
<p id="demo"></p>
</body>
</html>
Try calling your function on window.onload maybe. Something like this:
<!DOCTYPE html>
<html>
<body>
<script>
window.onload = function(){
document.getElementById("demo").innerHTML = "Javasc";
};
</script>
<p>
hey
</p>
<p id="demo"></p>
</body>
</html>
You have to let the page rendered and then call the method.
Or put the script tag at the end
<!DOCTYPE html>
<html>
<body>
<p>
hey
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Javasc";
</script>
</body>
</html>
I've tested this code in an old IE and it works, but on everything else that is modern it seems not to work.
The thing is it works only if the textarea hasn't been modified in any way, then after that it doesn't work. Any changes to the page and suddenly it ceases to function.
<html>
<script>
function clearArea() {
document.getElementById("tarea").innerHTML = "This is what\'s up.";
}
</script>
<body>
<button type="button" onclick="clearArea()">Click me to clear area</button>
<textarea id="tarea"></textarea>
</body>
</html>
Any idea what could be causing this?
Because a textarea does not have innerHTML, it has value.
function clearArea() {
document.getElementById("tarea").value = "This is what\'s up.";
}
<button type="button" onclick="clearArea()">Click me to clear area</button>
<textarea id="tarea"></textarea>
I prefer to use the value attribute, you can use it instead of innerHTML.
Here a demonstration: JSBin
Code
function clearArea() {
document.getElementById("tarea").value = "This is what's up.";
}
I think the main problem is that you forget to wrap your <script> tag in the <head> tag..
This is working :
<html>
<head>
<script>
function clearArea() {
document.getElementById("tarea").innerHTML = "This is what\'s up.";
}
</script>
</head>
<body>
<button type="button" onclick="clearArea()">Click me to clear area</button>
<textarea id="tarea"></textarea>
</body>
</html>
<!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>