I am trying to select an element within an element, essentially. The HTML looks something like this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="first">
<div></div>
<div><!-- the element I want to select --></div>
</div>
</body>
</html>
I have tried one method, which looks like this:
function findFirstDescendant(parent, tagname) {
parent = document.getElementsByClassName(parent)[0];
var descendants = parent.getElementsByTagName(tagname);
if (descendants.length)
return descendants[0];
return null;
}
and also this:
document.getElementsByClassName("first")[0].getElementsByTagName("div")[1];
Neither work, as the method seems to be outdated. I would like to keep jQuery out of this, but it is acceptable if there is no other solution.
You should definitely use querySelector to take advantage of CSS selectors...
var el = document.querySelector('.first > div:nth-child(2)');
console.log(el);
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="first">
<div></div>
<div>Hello!</div>
</div>
</body>
</html>
But obviously, you can use this more classical solution too:
var el = document.getElementsByClassName('first')[0].getElementsByTagName('div')[1];
console.log(el);
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="first">
<div></div>
<div>Hello!</div>
</div>
</body>
</html>
Sorry for wasting anyone's time. I feel a little dumb for not thinking of this sooner. I fixed the problem by adding a 250ms delay to the script, as it was being executed before the page fully loaded. My code was similar to this:
setTimeout(function() {
var a = document.getElementsByClassName("card-player")[0].getElementsByTagName("div")[0];
console.log(a);
}, 250);
You could also add in more variables if you wanted to debug or log more information like this:
setTimeout(function() {
var a = document.getElementsByClassName("first")[0];
var b = a.getElementsByTagName("div")[1];
var c = b.getElementsByTagName("div")[1];
var d = b.getElementsByTagName("div")[2];
}, 250);
Related
I'm trying to change the text in an h2 element with the simplest code but don't get what I'm doing wrong :
html
<h2 id="tries">Number of tries : 0</h2>
javascript
document.getElementById("tries").innerHTML = 'new text';
There is nothing wrong wiht that. You asked JS to replace the innerHTML, and JS done that.
If you want to change only the value after the ":" then here is an example where I placed a span into the the p and I change the innerHTML of this span.
function changeText(value) {
//this is the point
document.getElementById("tries-value").innerHTML = value;
}
const input = document.querySelector("input");
input.addEventListener("change", (e) => changeText(e.target.value));
changeText(input.value)
<h2 id="tries">Number of tries : <span id="tries-value">0</span></h2>
<label for="input-number">Change the input:</label>
<input id="input-number" value="10" type="number" />
I just guess you did that and as you can see, it will fail
<!doctype html>
<html>
<head>
<script>
document.getElementById("tries").innerHTML = 'new text';
</script>
</head>
<body>
<h2 id="tries">Number of tries : 0</h2>
</body>
</html>
You can first do DOM Operations if the DOM is actually loaded, so you just listen to the window.load event and it will work
<!doctype html>
<html>
<head>
<script>
window.addEventListener('load', function () {
document.getElementById("tries").innerHTML = 'new text';
});
</script>
</head>
<body>
<h2 id="tries">Number of tries : 0</h2>
</body>
</html>
I am learning to create an element dynamically in an html page using javascript. In this code I am trying to create a simple "h6" inside "div-1".
<!DOCTYPE html>
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1"></div>
<script>
function constructElement(){
var elem = document.createElement("h6");
elem.innerText("Dynamically added text.")
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
</html>
there are two mistakes in your code
the first is that you used wrong "id" name div-1 instead of div1
also, innerText isn't a function
this is the code after the fix :)
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1">
</div>
<script>
function constructElement() {
var elem = document.createElement("h6");
elem.innerText = "Dynamically added text."
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1">
</div>
<script>
function constructElement(){
var elem = document.createElement("h6");
elem.innerText= "Dynamically added text.";
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
Set the text content of a node: node.innerText = text
function constructElement(){
var elem = document.createElement("h6");
elem.innerText ="Dynamically added text."
document.getElementById("div-1").appendChild(elem);
}
This is directly not your answer but the algorithm is very similar
https://stackoverflow.com/a/56489422/10941112
(For the part of modals please put your own elements)
In case you need further clarification feel free to ask as this is not your direct answer
Also sorry to say but the question is a duplicate of -
Dynamically creating HTML elements using Javascript?
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(mypara)
{
mypara.innerHTML="Ooops!";
}
</script>
</head>
<body>
<script>var mypara = document.getElementById("para1");</script>
<h1 onclick="changetext(mypara)">Click this text to change the content of following paragraph</h1>
<p id="para1"> this is a paragraph I would like to change </p>
</body>
</html>
I would like to let user to click the heading to change the content of the paragraph, but I don't know the correct way of coding that. How to send the "mypara" parameter to myFunction() in HTML?
Your example almost works - the problem is when you execute this line:
var mypara = document.getElementById("para1");
The element you're refering to does not yet exist. You could fix it by just going inline:
<h1 onclick="changetext(document.getElementById('para1'))">...</h1>
Live example for this approach: http://jsfiddle.net/Gw5CG/2/
or perhaps just pass the id to the method:
<h1 onclick="changetext('para1')">...</h1>
and change the method to do the getElementById:
function changetext(mypara)
{
document.getElementById(mypara).innerHTML="Ooops!";
}
Live example for this approach: http://jsfiddle.net/Gw5CG/1/
The element doesn't exist yet when you're trying to get it.
Why not just get it in the event handler
<!DOCTYPE html>
<html>
<head>
<script>
function changetext() {
document.getElementById("para1").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext()">Click this text to change the content of following paragraph</h1>
<p id="para1">this is a paragraph I would like to change</p>
</body>
</html>
i have searched around but cant find exactly what i need. i want the div, which contains a variable value, to update every time the variable changes. is this possible? without reloading the whole page, as this would reset the variable value.
<head>
<script> var eg=30</script>
</head>
<body>
<div> 30 </div>
<button onclick=eg++>increase</button>
</body>
how would i then make the div containing the number update
You have to write your variable to div after update it.
<head>
<script> var eg=30</script>
</head>
<body>
<div id="mydiv"> 30 </div>
<button onclick='eg++; document.getElementById("mydiv").innerHTML = eg;'>increase</button>
</body>
document.getElementsByTagName('div')[0].innerHTML = your_var;
Add this on the onclick event
<head>
<script> var eg=30</script>
</head>
<body>
<div id="display"> 30 </div>
<button onclick="eg++;document.getElementById('display').innerHTML = eg;">Increase</button>
Start by creating a function that both increases the counter, and updates the div. Then, call that function from onclick. If you place your script at the botton, you can easily remove all the inline scripts from your HTML, which would make it more organized and easier to read:
<body>
<div id="egDiv"> 30 </div>
<button id="egButton">increase</button>
<script>
var eg=30
// Function to increase the counter
function increaseEg() {
eg++;
document.getElementById('egDiv').innerHTML = eg;
}
// Add onclick handler, the simplest way:
document.getElementById('egButton').onclick = increaseEg;
</script>
</body>
in my aspx page i have a div which contains simple html ,has some id(say 'datadiv')
using jquery i want to get the html of that div (entire div) into a JavaScript variable
how can it be done?
thank you.
var someVar = $("#somediv").html();
If you want the equivalent of Internet Explorer's outerHTML to retrieve both the div and it's contents then the function from this page that extends JQuery should help:#
jQuery.fn.outerHTML = function() {
return $('<div>').append( this.eq(0).clone() ).html();
};
Then call:
var html = $('#datadiv').outerHTML();
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Hello</b><p>, how are you?</p>
<script>
$("b").clone().prependTo("p");
</script>
</body>
</html>
**Out put:**
Hello
Hello, how are you?
Finally got it working..!! the simplest way !! HTML Code
<div class="extra-div">
<div class="div-to-pull-in-variable">
// Your Content Here
</div>
</div>
JQuery Code
$(function() {
var completeDiv = $('.extra-div').html();
alert(completeDiv);
})
});