This question already has answers here:
How to get a dom element in a new window?
(3 answers)
access a dom element of a different page in Javascript
(1 answer)
Closed 6 months ago.
I want to appendChild an element to another page after clicking a button.
I used document.getElementById() to select the element I want to appendChild to.
But it throws this error in the console - Cannot read properties of null (reading 'appendChild').
It works when I appendChild paragraph to the same page in which I click the button.
For both html documents I load the script at the bottom.
class Pojistovna {
constructor(){
this.tableOfInsured = document.getElementById("table-of-insured-container")
this.createInsured()
}
createInsured() {
this.continueButton.addEventListener("click", () => {
let paragraph = document.createElement("p")
paragraph.textContent = "Hi"
this.tableOfInsured.appendChild(paragraph)
}
}
}
Move this.tableOfInsured = document.getElementById("table-of-insured-container") to the top of createInsured fun.
Related
This question already has answers here:
jQuery Event : Detect changes to the html/text of a div
(13 answers)
Trigger for span text/html on changed
(6 answers)
Closed last year.
I really dont know how get the div tag in between value Which in this case is
F064
I have this Hmtl code..
<div class="product--price price--unit">
<span class="price--label label--purchase-unit">articlenumber:</span>
F064
</div>
I want to say if the F064 changes then alert what its changed to.
I want something like this in either JS or JQuery
var divTagVal = $("div.product--price");
$(divTagVal).on('change', function () {
alert(divTagVal);
});
So if F064 changes to F065 the it should alert "F065"
but this doesnt work, what am i doing wrong ?
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:
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"
}
This question already has answers here:
jQuery match part of class with hasClass
(6 answers)
jQuery selector for id starts with specific text [duplicate]
(4 answers)
Closed 4 years ago.
Trying to get some help on some JavaScript we are trying to post accross multiple landing pages. We are sending values to hidden fields on a button click 'lp-pom-button-3'.
However, the ID changes depending on the page, but will always have the format 'lp-pom-button-' with the number potentially changing depending on the page. Is there a function similar to 'like' in SQL, or saying any button that starts with or contains 'lp-pom-button-" for this to be triggered on? Thanks for you help!
<script type="text/javascript">
document.getElementById('lp-pom-button-3').addEventListener(
'click', function(event) {
ga(function() {
var tracker = ga.getAll()[0];
var clientId = tracker.get('clientId');
document.getElementById('GACLIENTID').value = clientId;
var userId = tracker.get('userId');
document.getElementById('GAUSERID').value = userId;
});
});
You can use the css selector for attribute value contains.
[id*="lp-pom-button-"]
or attribute value starts with:
[id^="lp-pom-button-"]
In vanilla javascript you can access elements using css selector with querySelector or for getting a list of elements querySelectorAll.
Here is an example:
document.querySelector('[id^="lp-pom-button-"]');
And HERE is a list of all the browsers and browsers version that support this function.
This question already has answers here:
Javascript infamous Loop issue? [duplicate]
(5 answers)
JavaScript variable binding and loop
(4 answers)
Closed 7 years ago.
i have a list of pre tags
<pre class="fruit">mango</pre>
<pre class="fruit">apple</pre>
<pre class="fruit">guava</pre>
now i create div tags dynamically and show next to pre tags .like this
this is the jsfiddle preview with all the codes
now what i want is get text of pre when i click div next to it.for example if i click first green div i want to get mango.
but the problem is i can't understand how can i add listners to div to achive this.content of pre tags can be changed .
how i tried it
var box=box=document.getElementsByClassName("fruit");
for(var i=0;i<box.length;i++){
var mydiv=document.createElement("div");
mydiv.onclick= function(){func(i);};
}
function func(x){
//alert(x); // x is always 4 because when this get fired i has increased to 4 in the loop.
var text = box[x].innerText || box[x].textContent;
alert(text);
}
the problem is when funt() trigger value of i has changed .how can i achieve this ??