sorry for question, I cant figure it out.
If:
<body onclick="myFunction(event)">
<p>Paragraph</p>
<h1>This is a heading</h1>
<button>This is a button</button>
<p id="demo"></p>
<script>
function myFunction(event) {
var x = event.target;
document.getElementById("demo").innerHTML = x.tagName;
}
</script>
</body>
how can I display the function result in current HTML element, which I clicked on? Not in "demo".
You have to change your HTML Code To be :
onclick="myFunction(this);"
In Your Case it will be :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" onclick="mFunction(this);" ID='TER' value="Heeeey">
</body>
<script>
function mFunction(obj){
obj.value = "My Result" ;
}
</script>
</html>
Hope you have done with event.target.nodeName
<body onclick="myFunction(event)">
<p>Paragraph</p>
<h1>This is a heading</h1>
<button>This is a button</button>
<p id="demo"></p>
<script>
function myFunction(event) {
var x = event.target;
x.innerHTML = x.nodeName;
}
</script>
</body>
The function doesn't have a result in the sense that it doesn't return anything. But in general, if you are trying to set the innerHTML of the object that you just clicked to 'something' you should be able to do
event.target.innerHTML = 'something'
Related
JS:
window.onload = function siteTitle() {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body onload="siteTitle()">
<h1 id="site-title" class="title">Site Title</h1>
<div class="box-container">
<div class="left-box">
a
</div>
<div class="right-box">
<h1 class="title-in">abc</h1>
a
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I have tried changing it multiple times with things I have found from other questions and website but I cannot fix this
The script worked when placed directly in the tag but not when imported
Thank you for your help
The following codes works for me well.
If these codes doesn't work for you, check your browser and update it.
try
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
<script src="main.js"></script>
</head>
<body>
<h1 id="site-title" class="title">Site Title</h1>
<div class="box-container">
<div class="left-box">a</div>
<div class="right-box">
<h1 class="title-in">abc</h1>
a
</div>
</div>
</body>
</html>
with
window.onload = () => {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
Since you're calling the function from <body onload="siteTitle()"> you need to define it with a normal function definition, not by assigning to window.onload.
function siteTitle () {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
Try giving a name to your function like this
window.onload = function siteTitle() {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
because you are giving siteTitle as a function but it is a parameter
I am not sure but it can work for you.
I'm trying to change the background color of a div element on button press but I'm getting the error Cannot set property 'BackgroundColor' of undefined. The event handler for the button is inside the window.onload event. I thought at that point every element inside the html document would be loaded, but apparently not.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.getElementsByClassName("random").style.BackgroundColor= "black";
});
}
</script>
</body>
</html>
try the following code segment.
the issue is document.getElementsByClassName("random") returning an array of elements.So you should select one element from that array and get the style of that element.
And BackgroundColor should be backgroundColor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.getElementsByClassName("random")[0].style.backgroundColor= "black";
});
}
</script>
</body>
</html>
You can this out - getElementsByClassName produces error "undefined"
Another alternative could be this.
<body>
<div id="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.getElementById("random").style.backgroundColor= "black";
});
}
</script>
Modify the script as follows and try again:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.querySelector(".random").style.backgroundColor= "black";
});
}
</script>
</body>
</html>
Look into comments by #Bravo, document.getElementsByClassName("random") returns a HTMLCollection, not a single element - therefore document.getElementsByClassName("random").style is undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function () {
document
.getElementById('button')
.addEventListener('click', function () {
const button = document.getElementsByClassName('random');
for (let index = 0; index < button.length; index++) {
const element = button[index];
element.style.backgroundColor = 'black';
}
// if you will have only one element with class=random or if you only want to apply style to the first element with class=random, then
// button[0].style.backgroundColor = 'black';
// in your case, you should add an id to the element and use id as the selector
});
};
</script>
</body>
</html>
I am trying to create an HTML form which consists of title, text area , post button and clear button. My aim is to clear the text area if the user clicks the Clear button, but before that an alert to appear asking the user if he is sure he wants to clear the text. If the user Types OK, the text area to be erased, if the user types Cancel, the method to be cancelled.
I tried the following code, but I have noticed that whatever input I type, or button I press, the text in the text area is erased by default. How do I prevent that and therefore make it work?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="global.css">
</head>
<body>
<form >
<input type="text" id="title" name="title">
<textarea id="blog_textarea" name="blog" placeholder="Your Text">
</textarea>
<br><button type="submit" id="post" name="submission" value="Submit">Post</button>
<button id="clear_button" onclick="clearFun()" >Clear</button>
</form>
<p id="demo"></p>
<script>
function clearFun() {
var par_output="";
var txt = prompt("To confirm, please type OK, or to stay type Cancel ");
if (txt == "OK" || "ok") {
document.getElementById("blog_textarea").value = "";
} else {
par_output = "Please type OK to confirm or Cancel";
}
document.getElementById("par_output").innerHTML = demo;
}
</script>
</body>
</html>
Also there is Jsfiddle if that helps
Many Thanks guys
you need to write both condition seperatly and form tag is also effect to clear it
if (txt == "OK" ||txt == "ok")
This should work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<textarea id="textarea"></textarea>
<br />
<button id="clearbutton">Clear</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#clearbutton').click(async () => {
const clear = await prompt('Clear? Type ok');
if (clear.toLowerCase() === 'ok') {
$('#textarea').val('');
}
});
</script>
</body>
</html>
In plain JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<textarea id="textarea"></textarea>
<br />
<button id="clearbutton">Clear</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
document
.getElementById('clearbutton')
.addEventListener('click', async () => {
const clear = await prompt('Clear? Type ok');
if (clear.toLowerCase() === 'ok') {
document.getElementById('textarea').value = '';
}
});
</script>
</body>
</html>
I am trying to create a magic 8 ball. I've added the answers at the top in an array, added the code to choose a random answer, and when the button is clicked, it's supposed to place said random answer in a p tag in a div. It actually worked very well a few times in codePen and then stopped. I didn't change a thing. Can anyone tell me what I'm missing if anything?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>8 Ball</title>
</head>
<body>
<div class="ball">
<div id="display">
<p id="output"></p>
</div>
</div>
<button id="button">Answer</button>
</body>
</html>
JavaScript
var answers = ["Yes!", "Absolutely!", "Not A Chance", "No",
"Ask Me Later", "Not Yet"];
//random answer function displays random in the output id
var randomAnswer = answers[Math.floor(Math.random()*answers.length)];
function myFunction(){
document.getElementById('output').innerHTML = randomAnswer;
}
document.getElementById('button').addEventListener('click', myFunction);
I've tried moving things around and looking addEventListener up. There's a few questions here on that, too, but I haven't found anything that solves my issue.
Try reordering the placement of your <script> tag in you HTML , so that the script is run after the DOM is loaded/parsed.
When your script is run, the button that you're trying to add a click listener to is not going to be present because the script is run from the <head> tag before the <body> DOM contents are loaded and ready.
Try the following adjustment:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>8 Ball</title>
</head>
<body>
<div class="ball">
<div id="display">
<p id="output"></p>
</div>
</div>
<button id="button">Answer</button>
<!-- Put script here instead -->
<script src="script.js"></script>
</body>
</html>
Also, consider revising your javascript so the the randomAnswer is recomputed each time the user clicks the button, so that the answer shown to the answer is able to change per button click:
var answers = ["Yes!", "Absolutely!", "Not A Chance", "No",
"Ask Me Later", "Not Yet"];
function myFunction(){
//[UPDATE] Move the random answer computation inside of myFunction()
var randomAnswer = answers[Math.floor(Math.random()*answers.length)];
document.getElementById('output').innerHTML = randomAnswer;
}
document.getElementById('button').addEventListener('click', myFunction);
Your script is loaded in the header. It's executed whereas the page didnt finished to load, so you're trying to attach a listener to the button element that doesnt exist yet. Move it to the bottom of the body section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
// deleted
<title>8 Ball</title>
</head>
<body>
<div class="ball">
<div id="display">
<p id="output"></p>
</div>
</div>
<button id="button">Answer</button>
<script src="script.js"></script> // pasted here
</body>
</html>
The problem is that your randomAnswer needs to be defined inside of the function, so that the answer gets decided upon each time you press the button. Outside of the function it gets defined on page load, and the answer will be the same each time.
Here's an updated snippet:
var answers = ["Yes!", "Absolutely!", "Not A Chance", "No",
"Ask Me Later", "Not Yet"
];
function myFunction() {
//random answer function displays random in the output id
var randomAnswer = answers[Math.floor(Math.random() * answers.length)];
document.getElementById('output').innerHTML = randomAnswer;
}
document.getElementById('button').addEventListener('click', myFunction);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>8 Ball</title>
</head>
<body>
<div class="ball">
<div id="display">
<p id="output"></p>
</div>
</div>
<button id="button">Answer</button>
</body>
</html>
Move
//random answer function displays random in the output id
var randomAnswer = answers[Math.floor(Math.random()*answers.length)];
inside of your function like this:
function myFunction(){
var randomAnswer = answers[Math.floor(Math.random()*answers.length)];
document.getElementById('output').innerHTML = randomAnswer;
}
document.getElementById('button').addEventListener('click', myFunction=()=>{
//[UPDATE] Move the random answer computation inside of myFunction()
var randomAnswer = answers[Math.floor(Math.random()*answers.length)];
document.getElementById('output').innerHTML = randomAnswer;
});
Place the logic inside the function and it will be created everytime that it is called.
Or ou could assign the function to a variable like this:
var answers = ["Yes!", "Absolutely!", "Not A Chance", "No",
"Ask Me Later", "Not Yet"];
let myFunction = function(){
//[UPDATE] Move the random answer computation inside of myFunction()
var randomAnswer = answers[Math.floor(Math.random()*answers.length)];
document.getElementById('output').innerHTML = randomAnswer;
}
document.getElementById('button').addEventListener('click', myFunction);
I started to work on a clicker game in JavaScript, but it's not working. I used the console to inspect the element to find out why it won't add anything to money and I don't think it is showing the variable either because it won't even show a 0.
<!doctype html>
<html lang="en">
<head>
<script>
function addMoney() {
var money
money+1;
var cash = document.getElementById("showmoney");
cash.innerHTML=money;
}
</script>
<meta charset="utf-8">
<title>clicker game</title>
</head>
<p id="showmoney"></p>
<body>
<button id="click" onClick="addMoney">click</button>
</body>
</html>
The call to the function should have parenthesis () :
<button id="click" onClick="addMoney()">
Instead of :
<button id="click" onClick="addMoney">
Also you have to init you variable money and to define it in the global scope so it will not return to default value zero on every click :
var money=0;
Hope this helps.
<!doctype html>
<html lang="en">
<head>
<script>
var money=0;
function addMoney(){
money++;
var cash = document.getElementById("showmoney");
cash.innerHTML=money;
}
</script>
<meta charset="utf-8">
<title>clicker game</title>
</head>
<p id="showmoney">
</p>
<body>
<button id="click" onClick="addMoney()">
click
</button>
</body>
</html>