This question already has answers here:
Dynamically creating HTML elements using Javascript?
(6 answers)
Closed 2 years ago.
Trying to make an Html div inside a div that is already made using javascript but my function has a problem.
Html part
<div id="test">
<button onclick="addDiv()">test</button>
</div>
Js part
let page = document.querySelector('test');
function addDiv() {
document.createElement('div')
document.querySelector('page')
addedDiv = document.appendChild('div')
page = document.appendChild('div')
document.getElementById('div').innerHTML = "ThisFunctionIsWorking"
}
the output should be seen in the console with a text inside the div that says ThisFunctionIsWorking
but instead I get an error(Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.)
I would appreciate your time helping me...
Your code is incorrect in many ways. I suggest you study basic (web) programming with the emphasis on fundamentals like return values, scope, etc. and then basic javascript and dom tree manipulation.
A solution to your problem is:
<div id="test">
<button onclick="addDiv('test')">test</button>
</div>
function addDiv(nodeId) {
var elem = document.createElement('div')
var container = document.getElementById(nodeId)
container.appendChild(elem)
elem.innerHTML = "ThisFunctionIsWorking"
}
Related
This question already has answers here:
Why is document.write considered a "bad practice"?
(17 answers)
Closed 1 year ago.
Can You help me find out how to use the html button element in JavaScript because
document.write("<body> <div> </div> </body>")
is not working for buttons or drop down menus so can you help me?
my guess is the
.write
Is the problem because that probably means text and a button is not text.
This is not the most correct way to do this. You must create elements and add them to the DOM tree.
let button = document.createElement('button');
document.body.append(button);
button.onclick = () => {
alert('button clicked');
}
I think you want append(). This example is stolen from this MDN page
let parent = document.createElement("div")
let p = document.createElement("p")
parent.append(p)
console.log(parent.childNodes) // NodeList [ <p> ]
This question already has answers here:
Which characters are valid in CSS class names/selectors?
(11 answers)
Closed 4 years ago.
Hi I'm trying to create a simple calculator website, and I'm trying to manipulate the DOM to display an updating equation, but it won't add the child to the display container.
HTML:
<body>
<div class="body">
<div id="display"></div>
In the Javascript, I have the following code to add an element to the "display" div:
JAVASCRIPT:
const display = document.querySelector("#display");
var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);
Am I missing a line? I have the exact code for another page and it works but not here.
The example you provided is finely working:
const display = document.querySelector("#display");
var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);
<div class="body">
<div id="display"></div>
</div>
Your <script> tag needs to be placed after the body content, not in the <head> section. This is because you must wait for the DOM to get loaded before you can use DOM methods such as document.querySelector() (i.e. at the point where your script is executing, document is undefined). If you still want your script file in the <head> section, modify it this way:
window.onload = function() {
const display = document.querySelector("#display");
var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);
}
However, the code you posted here is not causing the problem. There are many other errors in the JSFiddle you provided. Here are the errors:
let btn1 = document.querySelector("#1");
As stated earlier, this won't work with IDs starting with a number. Correct is using document.getElementById()
btn1.addEventListener("click", include("1"));
This is another mistake. The above line will only call include("1") once, and not on every click. This is not how you pass a parameter to a function inside an event listener. Correct is using
btn1.addEventListener("click", function() {
include("1");
});
...which will call include("1") whenever btn1 is clicked.
btnCLR.addEventListener("click", clearDisp());
If you want to call a function without parameters, remove the brackets. Only call clearDisp, not clearDisp().
equation.concat(value);
equation is a string, not an array. Use the normal addition (concatentation) operator:
equation += value;
Then, you have many functions inside event listeners which you didn't define. Either define these functions, or comment out the whole event listener. You will end up with a working calculator.
This question already has answers here:
How to put HTML in jQuery .text()
(6 answers)
Closed 5 years ago.
I am trying to grab text inside a page, and put it inside a div/span element using jQuery.
For example, grab <p>Did you know "LARC" is a Medical Term?</p> off a webpage and put it inside of a div like so: <p>Did you know <div class="LARC IS COOL">"LARC"</div> is a Medical Term?</p>
The reason I am asking is because I need to run a function on a specific word with a class but I don't have access to the html where that word is due to the fact it comes from an outside source and is loaded on the page.
This is what I currently have:
jQuery('.gfield_label').each(function() {
var text = jQuery(this).text();
jQuery(this).text(text.replace("LARC", "<div class='LARC IS COOL'>LARC</div>"));
});
But it just outputs this on the webpage:
Did you know <div title='THIS BETTER WORK'>LARC</div> is a medical term?
You will want to use the HTML function when replacing.
see: http://api.jquery.com/text/ and
http://api.jquery.com/html/
jQuery('.gfield_label').each(function() {
var text = jQuery(this).text();
jQuery(this).html(text.replace("LARC", "<div class='LARC IS COOL'>LARC</div>"));
});
Instead of using .text(), try using .html().
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
I have recently asked a question about this. But after starting a new project, I cannot figure out how to display a number of businesses in the system. There are 0 businesses. How do I make the p tag show it up?
<script>var businessesfound = 0; document.getElementById('businessamount').innerHTML = "Business amount:" + businessesfound;</script>
Please help! Thanks for all the support you have given me on other questions :)
The script is executed before the Tag is defined, so the JavaScript just can´t find it. Have a look in the F12-Tools / Console!
Make sure the script tag is added after the div tag OR run the script after the DOM is ready, like this:
$( document ).ready(function() {
var businessesfound = 0;
document.getElementById('businessamount').innerHTML = "Business amount:" + businessesfound;
});
var businessesfound = 0; document.getElementById('businessamount').innerHTML = "Business amount:" + businessesfound;
<p id="businessamount"></p>
This question already has answers here:
JS & jQuery can't detect html elements, and say's they are undefined
(4 answers)
Closed 6 years ago.
i have this .js code:
var test = document.getElementById('box').innerHTML;
and this html code
<textarea id="box">testing</textarea>
<div>
<?php echo '<script>document.writeln(test)</script>' ?>
</div>
i was expecting the div's would show testing but, instead, i got undefined result. but then, when i change the var test to:
var test = "this is just a test";
the div shows exactly the var test value. can someone explain what happens there?
The problem is that:
var test = document.getElementById('box').innerHTML;
is being ran after your page is loading, and therefore, test is NOT defined. The other script is running first, because it is found first.
If you REALLY want to do it, you can do something like this. Put the script that defines test immediately after the HTML element you are targeting. That will define the variable test.
<textarea id="box">testing</textarea>
<script>var test = document.getElementById('box').innerHTML;</script>
<div>
<script>document.writeln(test)</script>
</div>