This question already has answers here:
Mulitple Elements with the same ID
(5 answers)
Closed 2 years ago.
Hope everyone is well. I have created this simple JS function but I am not understanding why it's not working. The function name is correctly given and JS was working strangely. There are all P tags inside HTML and JS is only 2 line describing the color after a click. But only the first P tag is getting colored and the correct is getting colored. But 3 and 4 was blank why? is there any CSS solution for that? I have tried visited: and focus: on CSS don't work in a p tag.
here is the code
<!DOCTYPE html>
<html>
<head>
<title>Quiz page</title>
</head>
<body>
<p>Question 1</p>
<p id="wrong" onclick="myFunction()">1. Ans 1 </p>
<p id="correct" onclick="myFunction()">2. Ans 2</p>
<p id="wrong" onclick="myFunction()">3. Ans 3</p>
<p id="wrong" onclick="myFunction()">4. Ans 4</p>
<script>
function myFunction() {
document.getElementById("wrong").style.color = "red";
document.getElementById("correct").style.color = "green";
}
</script>
</body>
</html>
As others already commented, you should never have duplicate id in your markup. You must change to using class instead:
<!DOCTYPE html>
<html>
<head>
<title>Quiz page</title>
</head>
<body>
<p>Question 1</p>
<p class="wrong" onclick="myFunction()">1. Ans 1 </p>
<p class="correct" onclick="myFunction()">2. Ans 2</p>
<p class="wrong" onclick="myFunction()">3. Ans 3</p>
<p class="wrong" onclick="myFunction()">4. Ans 4</p>
<script>
function myFunction() {
document.querySelectorAll('.wrong').forEach(el => {
el.style.color = 'red'
})
document.querySelectorAll('.correct').forEach(el => {
el.style.color = 'green'
})
}
</script>
</body>
</html>
Related
This question already has answers here:
Why is document.write considered a "bad practice"?
(17 answers)
Best way to output Javascript?
(3 answers)
Closed 29 days ago.
note new to JavaScript
when clicking the button to write out the text from my input box it prints out the text but deletes everything else
JavaScript code
let = Text
document.getElementById("Button7").onclick = function () {
Text = document.getElementById("myText").value;
document.write(Text)
}
HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" id="myText" placeholder="enter text"> <br>
<button id="Button7">enter</button>
<script type="text/javascript" src="index.js"></script>
<h1>my first website test</h1>
</body>
</html>
You can display the value of the input in a <p> element by setting its textContent. Do not use document.write.
document.getElementById("Button7").addEventListener('click', function() {
document.getElementById("result").textContent = document.getElementById("myText").value;
});
<input type="text" id="myText" placeholder="enter text"> <br>
<button id="Button7">enter</button>
<p id="result"></p>
This question already has answers here:
How to detect, when content of an element changes
(5 answers)
How can I detect or trigger an event when text in <p> tag is changed? [duplicate]
(1 answer)
Closed 7 months ago.
I have a code in which i am changes a tag's inner text with js but i want that tag to call a function when it is changes, i dont know why i doesn't call to the function when it is changes please help.Sorry for my bad english.
This is an example of what i am trying to achieve :
<!DOCTYPE html>
<html>
<body>
<h1 id="result"></h1>
<p id="demo" onchange="myFunction()">Click button to change my HTML content</p>
<button id="press" onclick="changeText()">button</button>
<script>
function changeText() {
document.getElementById("demo").innerText = "hhhhhhhhhh";
}
function myFunction() {
document.getElementById("result").innerText = "Text changed!";
}
</script>
</body>
</html>
onchange will not work on the p tag as it doesn't have any value attribute. So, You can include your function named myFunction in the button's click event.
<!DOCTYPE html>
<html>
<body>
<h1 id="result"></h1>
<p id="demo">Click button to change my HTML content</p>
<button id="press" onclick="changeText();myFunction()">button</button>
<script>
function changeText() {
document.getElementById("demo").innerText = "hhhhhhhhhh";
}
function myFunction() {
document.getElementById("result").innerText = "Text changed!";
}
</script>
</body>
</html>
I just started learning code a few days ago and have been trying to build a basic web design from scratch using HTML, CSS, and JavaScript.
What I want to happen is have a box that you put your height in inches in, then click a button to calculate, then it displays your height divided by 7. My problem is that the calculate button displays nothing. Here's my HTML code:
<!DOCTYPEhtml>
<html lang="en-US">
<!--A banana is about 7 inches -->
<head>
<script type='text/javascript' src='script.js'></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title> Banana For Scale </title>
</head>
<body>
<div class="question">
<h1> How many bananas tall are you? </h1>
</div>
<div class=number-input>
<p>Enter your height in inches. </p>
<input type="number" id='myNumber'>
</div>
<div class='button'>
<button onclick="myCalculation()">Calculate</button>
</div>
<div class='answer'>
<p id='display'></p>
<img class='banana' src="https://pajamasmed.hs.llnwd.net/e1/trending/user-
content/51/files/2017/03/bananas-03.jpg" alt='banana'>
</body>
</html>
And here is my code located in script.js:
var bananaHeight() = document.getElementById("myNumber" / 7);
function myCalculation() {
document.getElementById("display") = bananaHeight();
}
There were some syntax errors in your code. Check out the code below..i highly recommend you to check out some basic javascript tutorials.
https://www.w3schools.com/js/js_htmldom.asp
var bananaHeight = function(){
return (document.getElementById("myNumber").value/7);
};
function myCalculation() {
document.getElementById("display").innerHTML = bananaHeight();
}
<div class="question">
<h1> How many bananas tall are you? </h1>
</div>
<div class=number-input>
<p>Enter your height in inches. </p>
<input type="number" id='myNumber'>
</div>
<div class='button'>
<button onclick="myCalculation()">Calculate</button>
</div>
<div class='answer'>
<p id='display'></p>
<img class='banana'
src="https://pajamasmed.hs.llnwd.net/e1/trending/user-
content/51/files/2017/03/bananas-03.jpg" alt='banana' >
This could be a solution for you. Check the Comments to understand what i'm dooing there..
To learn more about JavaScript try Codecademy - learning by dooing and its free ;)
function myCalculation(){
var bananaHeight = document.getElementById('myNumber').value / 7; // Get the Inputvalue and do your calculation (/7)
document.getElementById('display').innerHTML = bananaHeight; // display the result of your calculation inside the <p>-Element with the id 'display'
}
<body>
<div class="question">
<h1> How many bananas tall are you? </h1>
</div>
<div class=number-input>
<p>Enter your height in inches. </p>
<input type="number" id='myNumber'>
</div>
<div class='button'>
<button onclick="myCalculation()">Calculate</button>
</div>
<div class='answer'>
<p id='display'></p>
<img class='banana' src="https://pajamasmed.hs.llnwd.net/e1/trending/user-
content/51/files/2017/03/bananas-03.jpg" alt='banana'>
</body>
I just tried your code in my debugger (as suggested by other answers) and the first error is here and prevents your code from loading the script
var bananaHeight() = document.getElementById("myNumber" / 7);
Next, you try to assign the result of bananaHeight to another function
document.getElementById("display")
This does not return an editable object. You should use innerHtml, like this
document.getElementById("display").innerHTML = bananaHeight;
Hope it helps.
Nicolas
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
The following is what my HTML document looks like:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="scripts/homepage-script.js"></script>
</head>
<body>
<div id="how-it-works">
<p>How It Works</p>
<img src="some-imageurl">
<div id="steps">
<p>Step 1</p>
<p>Step 2</p>
<p>Step 3</p>
</div>
And here is my script:
$('#steps > p').on('click' , function(){
$('steps > p').css('background', 'yellow');
});
Why is my script not running on my website?
You need to wrap the jQuery in a document ready and you can use $(this) since it is targetted in the onclick event:
$(document).ready(function(){
$('#steps > p').on('click',function(){
$(this).css('background', 'yellow');
});
})
however what I would recommend is having a highlight class that is then toggled in the onclick event;
//CSS
.highlight{background:yellow}
$(document).ready(function(){
$('#steps > p').on('click',function(){
$(this).toggleClass('highlight');
});
})
Tht way you are adding / removing a class instead of altering the elements CSS.
If you want to add the highlight class to all the p's in that div as per #Phil comment -
$(document).ready(function(){
$('#steps > p').on('click',function(){
$('#steps > p').toggleClass('highlight');
});
})
$(document).ready(function(){
$('#steps > p').on('click',function(){
$(this).toggleClass('highlight');
});
})
.highlight{background:yellow}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="scripts/homepage-script.js"></script>
</head>
<body>
<div id="how-it-works">
<p>How It Works</p>
<img src="some-imageurl">
<div id="steps">
<p>Step 1</p>
<p>Step 2</p>
<p>Step 3</p>
</div>
</body>
</html>
You are missing the # selector in your nested line of code:
$('#steps > p').css('background', 'yellow');
This will make all of the p elements turn to a yellow background. If you only want the element the user clicked, then reference the "selected" object with $(this):
$('#steps > p').on('click' , function(){
$(this).css('background', 'yellow');
});
The script should be after the div.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="how-it-works">
<p>How It Works</p>
<img src="some-imageurl">
<div id="steps">
<p>Step 1</p>
<p>Step 2</p>
<p>Step 3</p>
</div>
<!--The script should be after the div.-->
<script src="scripts/homepage-script.js"></script>
Hello I simply wanna highlight the fist element....
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var $element = $(".intro");
$element[0].css("bbroswerackground-color", "yellow");
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">This paragraph has class "intro".</p>
<p>This is a paragraph.</p>
<p class="intro">This paragraph has class "intro".</p>
<p>This is another paragraph.</p>
<p class="intro">This paragraph has class "intro".</p>
</body>
</html>
This should works :
$(".intro").eq(0).css("background-color", "yellow");
EDIT : you have an error in background syntax.
EDIT 2 : please next time search by yourself
If you wish to apply/set certain property on the 1st element.
Using .first() filter
$(".intro").first().css("background-color", "yellow");
Example : https://jsfiddle.net/DinoMyte/4y80has5/
Using :first selector :
$(".intro:first").css("background-color", "yellow");
Example : https://jsfiddle.net/DinoMyte/4y80has5/1/
You may also do this without JQuery using CSS3 selector like this:
<!DOCTYPE html>
<html>
<head>
<style>
p.intro:first-of-type {
color:red;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">This paragraph has class "intro".</p>
<p>This is a paragraph.</p>
<p class="intro">This paragraph has class "intro".</p>
<p>This is another paragraph.</p>
<p class="intro">This paragraph has class "intro".</p>
</body>
</html>