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>
Related
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>
I would like to scrape the contents of a DIV based on a class within the DIV for example, my page would contain
<html>
<head></head>
<body>
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
</body>
</html>
The result would be:
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
I have tried
$.get("https://some.url.com/index.html", function(my_var) {
console.log($(my_var).closest('div').find('.foo'));
});
But just get an empty result?
You should first find .foo and then select parent of it using .closest()
$.get("https://some.url.com/index.html", function(my_var) {
console.log($(my_var).find(".foo").closest('div'));
});
$(".foo").closest("div").css("color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
body
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
body
</body>
</html>
For Better approach need to target body first than find your particular class find('.foo') you can view the working example as below :
$(document).ready(function(){
$('body').closest('body').find('.foo').css("color", "red")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div>
<p class="foo">some text</p>
<p>test1</p>
<p>test 2</p>
</div>
</body>
</html>
I am new to jQuery, and I loaded a div from an external HTML page and I wanted to perform functions such as click, hide, show, etc. The problem is that I tried to put the functions which I wanted to accomplish in the HTML pages script but they did not work. I see the div of #helpPage loaded.
The HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>
<script>
$(document).ready(function(){
$( "#loadHelpHere" ).load( 'help.html #helpPage' );
$('#helpSection div').not(".helpDiv").hide();
$('.justClick').bind('click', function() {
$('#helpSection div').not(".helpDiv").hide();
$('#helpSection div.helpDiv').html($('#helpSection div.helpDiv' + ($(this).index()+1)).html());
});
});
</script>
<style>
#helpMenu ul li{margin: 0 0 5px 0;}
</style>
</head>
<body>
<div id="loadHelpHere"></div>
</body>
</html>
That is what was loaded into the div from the external HTML page:
<div id="helpPage">
<div id="helpMenu">
<header>Help Documentation</header>
<article>
<h4>Help Menu</h4>
<ul id="menu">
<li class="current_page_item justClick">Help Section 1</li>
<li class="justClick">Help Section 2</li>
<li class="justClick">Help Section 3</li>
</ul>
</article>
</div>
<div id="helpSection">
<div class="helpDiv">
<header>Help Documentation</header>
<article>
Works!
</article>
</div>
<div class="helpDiv1">
<header>Help Documentation content 1</header>
<article>
Help Section 1
</article>
</div>
<div class="helpDiv2">
<header>Help Documentation content 2</header>
<article>
Help Section 2
</article>
</div>
<div class="helpDiv3">
<header>Help Documentation content 3</header>
<article>
Help Section 3
</article>
</div>
</div>
</div>
Any help is appreciated.
Event delegation is what you want to use for HTML elements that are dynamically loaded into the DOM. The .on() method is the place to start.
Example
$(document).on('click', '.justClick', function(e){
$('#helpSection div').not(".helpDiv").hide();
$('#helpSection div.helpDiv').html($('#helpSection div.helpDiv' + ($(this).index()+1)).html());
});
Any questions?
How to apply the .toggle() only the clicked DIV.
My current code applies to all toggle div.
The code switch between the content from <div class="toggled">
I need to do it in version 1.4
Anyone can help me?
This my code:
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle').click("click", function() {
$('.toggled').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
<div class="toggled">
<h3>FRONT 1</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 1</h3>
</div>
Switch Text Toggle<br/>
</div>
<div class="card">
<div class="toggled">
<h3>FRONT 2</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 2</h3>
</div>
Switch Text Toggle<br/>
</div>
</body>
</html>
Thanks in advance!
You'll need to change the ID of the anchors to a class, as ID's are unique.
Then you'd do:
$(function() {
$('.toggle').on("click", function() {
$(this).siblings('.toggled').toggle();
return false;
});
});
Where you find the siblings of the clicked anchor with the class .toggled, and toggle those. You also need a document.ready function, and the event handler has some typos.
And use a newer version of jQuery, 1.4 is outdated.
FIDDLE
Replace $('.toggled').toggle(); with $(this).toggle();. You're currently requesting all .toggle containers be toggled, not the one that is the focus of the event.
Try this:
$('.card #toggle').click(function() {
$('.toggled').toggle();
return false;
});
I'm new to JQuery and I would want like to know how to apply the .toggle() method only in clicked DIV instead of the all DIVs of the page.
Can anyone help me?
PS: I need implement in the JQuery version 1.4
This is my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle2').live("click", function() {
$('.toggle2').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 1</p>
<p class="toggle2" style="display:none;">BACK 1</p>
</div>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 2</p>
<p class="toggle2" style="display:none;">BACK 2</p>
</div>
</body>
Thanks in advance!
$(function() {
$('#toggle2').live("click", function() {
$(this).parent().find('.toggle2').toggle();
return false;
});
});
ID's are unique, and this will probably only work on the first occurence of #toggle, so you'll need to use classes there as well.
FIDDLE