I am new to javascript and jquery. I need to navigate through the DOM to change the text of Change Me to best when button btnChangeText is clicked.
//HTML
<div>
<p>
<span>Some Text</span>% <span id="spnTwo">More Text</span>%<span>Thie Text</span>
</p>
<p><span>Max Text</span>= <span>Change Me</span>=<spna>Less Text</spna></p>
</div>
<button id="btnChangeText">Change the Span</button>
//jQuery
$("#btnChangeText").click(function () {
$('.spnTwo').children('span').text("Best");
});
Can you please help to figure out my mistakes. What should i do next to get the text changed.
Look at your jquery. You've used . instead of #. When using ID you should use # to target it. Your code is very messy. Make sure your code is clear.
Hope this helps.
$("#btnChangeText").click(function () {
$('#spnTwo').text("Best");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>
<span> Some Text</span>% <span>More Text</span>
%<span>Thie Text</span></p>
<p><span>Max Text</span>= <span id="spnTwo">Change Me</span>
= <spna>Less Text</spna></p>
</div>
<button id="btnChangeText">Change the Span</button>
Related
Need to display a div when the user clicks the button.
//html-code
<div class="col-md-4">
<h4 class="service-heading">Sociala Medier</h4>
<p class="text-muted">first line of text.</p>
<div class="info-text" style="display:none">
<p class="text-muted">Second line of text.</p>
</div>
<button class="info-button"><span>Läs mer </span></button>
</div>
//js-code
document.getElementByClassName("info-button").addEventListener("click", function(){
document.getElementByClassName('info-text').style.display = "block";
});
Any advice how I can get this to work? Also tested with onclick but that doesn't work either.
You're passing elements classes to the .getElementById function. In short, you could change your HTML to this:
<div class="col-md-4">
<h4 class="service-heading">Sociala Medier</h4>
<p class="text-muted">first line of text.</p>
<div id="info-text" style="display:none">
<p class="text-muted">Second line of text.</p>
</div>
<button id="info-button"><span>Läs mer </span></button>
</div>
And it would work
It's actually "getElementsByClassName" you missed the s and it gets a collection so you need to be specific on which one you are targeting. Given your code, you want the first/only element
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
https://jsfiddle.net/cbye0ph9/
document.getElementsByClassName("info-button")[0].addEventListener("click", function(){
document.getElementsByClassName('info-text')[0].style.display = "block";
});
I am new to jQuery so please help me with the output.
Below is the HTML code used for reference.
<html>
<body>
<div id="level1">
<p>
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</p>
</div>
</body>
</html>
When I used following as script
<script type="text/javascript">
$(document).ready(function (){
var div = $("#level1").find("div").each(function(){
alert($(this).attr('id'));
});
});
</script>
The result was 5 alerts with id of each div
But when I used
<script type="text/javascript">
$(document).ready(function(){
var div = $("#level1").find("span > div").each(function(){
alert($(this).attr('id'));
});
});
</script>
There were only two alert for level 1.2.1 and 1.2.2
I was wondering why there was no alert for 1.1.1 and 1.1.2 as they also have span as their parents?
Thanks in advance.
If divs can't be child of
then why is
<p>
<div id="level1">
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</div>
</p>
Working fine ??
Because of your incorrect HTML.
The browser is going to generate your html as followed.
<p>
<span id="level1.1">
</span>
</p>
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
Because a div can't be a child of a p
If you remove the first <p> in your code, you wil get an alert of the 4 levels sub levels.
divs cannot be children of p in HTML
Change your HTML markup with the following:
<div id="level1">
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</div>
and you should yield the expected results !
Because your HTML structure is not correct this how your structure is populated :
.find() method only travels a single level down the DOM tree.
Here you can find it.
The .find() and .children() methods are similar, except that the .find() method only travels a single level down the DOM tree.
I want to display hiddentfield value in
<p style="color: Red">
Please note that you have <span>
javascript:$("input[id$=hdnCartCount]").val();
</span> more pending orders.
<br />
Click Checkout to proceed!
</p>
How can I display?
Assuming you want this to be dynamic, slight re-arrange your HTML (note the ID I've given to your span):
<p style="color: Red">
Please note that you have
<span id="pendingOrdersCount"></span>
more pending orders.
<br />
Click Checkout to proceed!
</p>
Then you can do:
<script type="text/javascript">
$(function () {
$("#pendingOrdersCount").text($("input[id$=hdnCartCount]").val());
});
</script>
DEMO
Try giving an id to the span and
$("#spanId").text($('#hdnField').val());
I am looking to find the parent div id (i.e. "Bakerloo") from this layout when the button is clicked within ".buttonleft0" in jquery / javascript.
<div id='Bakerloo' class='box'>bakerloo<p></p><span class='buttons'>
<span class='buttonleft0'><button onClick='up()'><span class='icon icon10'></span>
</button>
</span><span class='buttonleft'></span><span class='buttonright'></span></span>
<div class='comingup'></div>
<div class='more'></div></div>
I have tried:
$(this).parent('id');
But this just returns 'undefined'.
$(this).closest('div').attr('id')
I think this is what you want
The parent() function returns the jQuery object, so you need to use the attr() for any of it's attributes like so:
$(this).closest().attr('id');
Edit: On further inspection it appears the button isn't the direct child of the div, and so use of the closest() function would be required.
Straight up Javascript always works for me.
<div id='Bakerloo' class='box'>
bakerloo<p></p>
<span class='buttons'>
<span class='buttonleft0'>
<button onClick='alert(this.parentNode.parentNode.id)'>
<span class='icon icon10'></span>
</button>
</span>
<span class='buttonleft'></span>
<span class='buttonright'></span>
</span>
<div class='comingup'></div>
<div class='more'></div>
</div>
Try this:
$(this).parent().attr("id");
Your code itself have few errors so here is the correct one:
HTML
<div id='Bakerloo' class='box'>bakerloo<p></p><span class='buttons'>
<span class='buttonleft0'><button><span class='icon icon10'>Click here</span>
</button>
</span><span class='buttonleft'></span><span class='buttonright'></span></span>
<div class='comingup'></div>
<div class='more'></div></div>
JQuery
jQuery(document).ready(function($){
$("button").on('click',function(){
alert($(this).closest('div').attr('id'));
});
});
here is the fiddle http://jsfiddle.net/cpeeyush/ydk4e/
Try this:
$(this).closest('div[id]')
alert($(this).parent().id);
If you want to be sure to select correct class, try:
alert($(this).parent('.div').id);
If you have a deeper hierarchy you can use:
alert($(this).parents('.div:eq(n)').id);
where n is which parent you want to get
I have html code that looks roughly like this:
<div id="id1">
<div id="id2">
<p>some html</p>
<span>maybe some more</span>
</div>
<div id="id3">
<p>different text here</p>
<input type="text">
<span>maybe even a form item</span>
</div>
</div>
Obviously there's more to it than that, but that's the basic idea. What I need to do is switch the location of #id2 and #id3, so the result is:
<div id="id1">
<div id="id3">...</div>
<div id="id2">...</div>
</div>
Does anyone know of a function (I'm sure I'm not the first person to require this functionality) that can read and write the two nodes (and all their children) so as to swap their location in the DOM?
In this case, document.getElementById('id1').appendChild(document.getElementById('id2')); should do the trick.
More generally you can use insertBefore().
This function takes any node that is passed into it and wraps it with the tag given. In the example code snippet I wrapped a span tag with a section tag.
function wrap(node, tag) {
node.parentNode.insertBefore(document.createElement(tag), node);
node.previousElementSibling.appendChild(node);
}
function wrap(node, tag) {
node.parentNode.insertBefore(document.createElement(tag), node);
node.previousElementSibling.appendChild(node);
}
let toWrap = document.querySelector("#hi");
wrap(toWrap, "section");
console.log(document.querySelector("section > #hi"), " section wrapped element");
<span id="hi">hello there!</span>
You can use
insertAdjacentElement instead of appendChild to have more control about the position of element with respect to a target element.
Syntax: targetElement.insertAdjacentElement(position, element).
It has four position codes as:
'beforebegin': Before the targetElement itself.
'afterbegin': Just inside the targetElement, before its first child.
'beforeend': Just inside the targetElement, after its last child.
'afterend': After the targetElement itself.
it appears as:
//beforebegin
<p>
//afterbegin
foo
//beforeend
</p>
//afterend
In your case, you can write the code as:
document.getElementById('id2').insertAdjacentElement('beforebegin', document.getElementById('id3'));
Note that this way, you don't need reference the parent (container) element!
Also consider You have more elements than id2, id3, eg: id4, id5, id6. Now, if you want to reposition for example id5 after id2, its as simple as:
function changePosition() {
document.getElementById('id2').insertAdjacentElement('afterend', document.getElementById('id5'));
}
<div id='container'>
<div id='id1'>id1</div>
<div id='id2'><u>id2</u></div>
<div id='id3'>id3</div>
<div id='id4'>id4</div>
<div id='id5'><b>id5</b></div>
<div id='id6'>id6</div>
</div>
<p><input type='button' onclick="changePosition()" value="change position"></p>
In my opinion is worth adding that if you need just a visual change (the DOM will stay the same but I will change in the UI) you can use the CSS order property.
It is probably more efficient that working on the DOM like the other answers, althought again doesn't really change the DOM structure so of course is not a real answer to this question.
Example:
document.addEventListener("DOMContentLoaded", function () {
const btnEl = document.getElementById('btn-swap');
const elToSwap = document.getElementById('id2');
btnEl.addEventListener('click', e => {
elToSwap.classList.toggle("first");
});
});
.container {
display: flex;
flex-direction: column;
}
.first {
order: -1;
}
<div class="container">
<div id="id1">first DIV</div>
<div id="id2">second DIV</div>
</div>
<button id="btn-swap">swap divs</button>
Short
I just add button (at the bottom) and js to your html
id3.after(id2);
function swap() {
id3.after(id2);
}
<div id="id1">
<div id="id2">
<p>some html</p>
<span>maybe some more</span>
</div>
<div id="id3">
<p>different text here</p>
<input type="text">
<span>maybe even a form item</span>
</div>
</div>
<button onclick="swap()">swap</button>