Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How would I go about getting which child was clicked when the container is clicked? Whichever child is clicked to store that in a variable?
w
html:
<div class="cont">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
By finding the clicked div inside .cont
$(".cont div").click(function(){
var clicked = $(this);
})
FIDDLE
You can use event.target
$('.cont').on('click',function(e){
console.log(e.target.nodeName);
console.log(e.target.className);
});
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
How would I change the class attribute in my HTML to "night nosmoke" using JavaScript?
<div id="imperium" class="day nosmoke" style="margin-left: -800px; margin-top: -600px;">
I've tried copying the jspath then look at innerHTML but that just brings other stuff up.
I guess this is what you mean. Remove day class and add night class to the element:
document.getElementById('imperium').classList.remove('day');// <---- Remove day
document.getElementById('imperium').classList.add('night'); //<---add class night
console.log(document.getElementById('imperium'))
<div id="imperium" class="day nosmoke" style="margin-left: -800px; margin-top: -600px;">
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I've got a very amateur question since I am very new to coding!
I have 4 button inputs "skolefag", ""sport", "fritid", "diverse" and 4 large squares (stacked upon eachother, different colors, but you can only see the red one)
I want to switch between divs (the large squares) when i click on the different categories, so that the contents and background color of the correct/matching large square shows.
What would be the easiest technique to achieve this trough?
Sorry again and thank you in advance!
You need to use onclick attribute on you button or add a click eventListenner to it.
Then you create a function that is called by onclick="myfunction(idButton)" or by your eventListener :
function myfunction(idButton) {
document.getElementById("my-elmt-to-set-up").backgroundColor = docuement.getElementById(idbutton).backgroundColor
}
and same thing for color properties, review javascript lesson I think --> after lesson you can make some incredible interactions
Here is one solution (which I think is neat):
document.addEventListener("DOMContentLoaded", function() {
change_menu("home");
});
function change_menu(
menu_to_show
) {
['home', 'second', 'third'].forEach(function(memuee) {
document.getElementById(memuee).style.display = 'none';
});
document.getElementById(menu_to_show).style.display = 'block';
}
<div style='display: flex;font-size: 200%;'>
<div>
<div style="background:green" onclick="change_menu('home')">Home</div>
<div style="background:red" onclick="change_menu('second')">Go To Second</div>
<div style="background:blue" onclick="change_menu('third')">Go To Third</div>
</div>
<div id="home" style="background:green">
HOME PAGE
</div>
<div id="second" style="background:red">
SECOND PAGE
</div>
<div id="third" style="background:blue">
THIRD PAGE
</div>
</div>
Of course this could be further optimized by referencing "page" divs by the "button" div's ids (e.g. home_page from home_button) or grouping ids within given "wrapper" divs, using classes, etc., but I think this is the essential solution.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
A have e3 and e2 divs, and parent div e.
There is too many e divs on the page.
How can I get e3 div value when I click on div e2?
Thanks.
There is no value attribute for div. You could get the innerHTML through javascript.
var divValue = document.getElementById('e3').innerHTML;
Let me first tell you how i understood the question. This is kind of how your html is structured:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="e">
<div id="e2">
i am e2 text
</div>
<div id="e3">
i am e3 text
</div>
</div>
<div id="e">
another e text
</div>
And this is the js code that will give the content of the e3 div when the user click on the e2 div.
$(document).ready(function(){
$("#e2").click(function(){
alert($("#e3").html());
})
});
Hope this helps :)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
how to simply this code? I would show 1 div on click and hide other div.
I do this for ten and more divs... how to simply code?
code
HTML
<div id="div1"><p>div1</p></div>
<div id="div2"><p>div2</p></div>
<div id="div3"><p>div3</p></div>
<div id="parte1"></div>
<div id="parte2"></div>
<div id="parte3"></div>
Javascript:
$("#parte1").on('click', function() {
$("#div1").fadeIn(100);
$("#div2").fadeOut();
$("#div3").fadeOut();
});
$("#parte2").on('click', function() {
$("#div1").fadeOut();
$("#div2").fadeIn(100);
$("#div3").fadeOut();
});
$("#parte3").on('click', function() {
$("#div1").fadeOut();
$("#div2").fadeOut();
$("#div3").fadeIn(100);
});
You can change your html to something like this
Demo
http://jsfiddle.net/g4whs/5/
HTML
<div id="div1" class="div"><p>div1</p></div>
<div id="div2" class="div"><p>div2</p></div>
<div id="div3" class="div"><p>div3</p></div>
<div class="parte" id="parte1" data-num="1"></div>
<div class="parte" id="parte2" data-num="2"></div>
<div class="parte" id="parte3" data-num="3"></div>
and JS
$(".parte").on('click', function() {
var n = $(this).data('num');
$('.div').fadeOut();
$('.div').eq(n-1).fadeIn(100);
});
You could actually just parseInt the parte id and get the index but using data-num, you can change your IDs or not use them at all
you can change them all to the same class and then use:
$(".class").click(function(){
$(".class").not($(this)).hide();
});
That may work, or something similar
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Hi guys i have a problem with a selector of jquery.
I have this Html:
<div id="Id_Province_chzn">
<a href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
<span> + this.default_text +
</span>
<div>
<b></b>
</div>
</a>
<div class="chzn-drop" style="left:-9000px;">
<div class="chzn-search">
<input type="text" autocomplete="off" />
</div>
<ul class="chzn-results"> **<-- I need to access here**
</ul>
</div>
I need to append <li> to the <ul> tag, but i don't know how to access.
My idea is to do something like this:
var ul = $(??);
ul.append('<li>some text</li>');
Sorry my english and thanks for your help.
use the class selector
$('ul.chzn-results').append(....)
$('ul.chzn-results') should do it.