Get div value using jquery or js [closed] - javascript

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 :)

Related

Display one object - after clicking another object in JavaScript/HTML [closed]

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.

How to build string with Bullet format [closed]

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 6 years ago.
Improve this question
I am trying to display string as
. string1
. string2
. string3
By using Append function of Jquery how to build string with bullet format.
Seeing as html lists are set up using ul and li tags, we can create a html list as follows:
<ul class="myList">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
To append to it using jQuery:
$(".myList").append("<li>New Item</li>");
See the following JSFiddle to see it in action: JSFiddle -
That code adds an item to the list after 3 seconds, so you can see it being appended.
<ul style="list-style-type: normal;" id="list"></ul>
<script>
$('#list').append('<li>string1</li>');
</script>

How to store which child was clicked in a variable? [closed]

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);
});

how to simply this code? I would show 1 div on click and hide other div [closed]

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

Why does this var only select first element found? [closed]

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 8 years ago.
Improve this question
I am trying to select a specific parent of every element that has a title attribute that starts with "Mod" and put them in a single var that I can then easily control.
var allMods= $('#main-element .object[title^="Mod"]').closest('.specific-parent');
$(allMods).hide();
but it only works on the first found element, I can't understand how to set the var to be every match, can someone give me a hand please?
It should work provided all of the .object[title^="Mod"] elements are within the #main-element container.
Example: Live Copy | Source
HTML:
<div id="main-element">
<div class="specific-parent">
<div class="object" title="Mod1">Mod1 - turns green</div>
</div>
<div class="specific-parent">
<div class="object" title="Mod2">Mod2 - turns green</div>
</div>
<div class="specific-parent">
<div class="object" title="Mod3">Mod3 - turns green</div>
</div>
</div>
<div>
<div class="specific-parent">
<div class="object" title="Mod4">Mod4 - does <strong>not</strong> turn green</div>
</div>
</div>
JavaScript:
$('#main-element .object[title^="Mod"]').closest(".specific-parent").css("color", "green");
Result: Only the .specific-parents of .object[title^="Mod"] elements that are within #main-element turn green.
As per the Docs:
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
You probably want .parents() (note the S, .parent() also returns only ONE element)

Categories