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 5 months ago.
Improve this question
with this code I managed to create a child to each of the elements of the Node list via QueryselctorAll but I need to retrieve the tille ((document.queryseletor(....).title) works but not dynamically...) of the parent div dynamically as a variable to enter it in the innerHTML of the child. Do you have an idea ?
function onloaddiv() {
for (const item of document.querySelectorAll('.mat_option')) {
divp = document.createElement("div");
var2 = document.querySelector(".mat_option").title;
divp.innerHTML= "" + var2;
item.append(divp);
}
}
From your description I'm not 100% sure what you'd like to achieve, but maybe this?
function onloaddiv() {
for (const item of document.querySelectorAll('.mat_option')) {
divp = document.createElement("div");
var2 = item.title;
divp.innerHTML= "" + var2;
item.append(divp);
}
}
You don't need to query selector once again, you already have item in your loop
function onloaddiv() {
for (const item of document.querySelectorAll('.mat_option')) {
divp = document.createElement("div");
divp.innerHTML = item.title;
item.append(divp);
}
}
It doesn't work "dynamically", as you say, because document.querySelector(...) returns only first element it could find.
Related
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 5 months ago.
Improve this question
hello i'm work for question system i want to add many answers in a one question in a one value
html
<input id="an" placeholder="test" type="text"/><a id="wo" style="display:none;">done test</a><button id="bt">Submit</button>
javascript
const an = document.getElementById("an");
const bt = document.getElementById("bt");
bt.addEventListener("click", () => {
if (an.value.toLowerCase() === "test") { // I want create many value in here.
bt.style.display = "none";
an.style.display = "none";
document.getElementById("wo").style.display = "initial";
} else {
bt.innerText = "Wrong!"
bt.style.background = "red";
}
});
I hope this answer is what you are looking for:
You can make an array with your answers, and then check to see if the given answer is inside the array.
const array = ['test', 'test2', 'test3'];
if (array.includes(an.value.toLowerCase() ) )
...
Something else, you are missing a semicolon in your else { ... }.
bt.innerText = "Wrong!";
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 1 year ago.
Improve this question
var toplama_islemi = (document.getElementById("toplama_islemi").style.display ="none");
var cıkarma_islemi = (document.getElementById("cıkarma_islemi").style.display ="none");
var carpma_islemi = (document.getElementById("carpma_islemi").style.display ="none");
var bolme_islemi = (document.getElementById("bolme_islemi").style.display ="none");
And why are there two equal signs here?
Those aren't comparisons. They're assignments. The styles are applied to the elements, and then the elements' style property values are assigned to variables.
Here's a demonstration.
setTimeout(function() {
var toplama_islemi = (document.getElementById("toplama_islemi").style.display = "none");
var cıkarma_islemi = (document.getElementById("cıkarma_islemi").style.display = "none");
var carpma_islemi = (document.getElementById("carpma_islemi").style.display = "none");
var bolme_islemi = (document.getElementById("bolme_islemi").style.display = "none");
console.log({toplama_islemi, cıkarma_islemi, carpma_islemi, bolme_islemi});
}, 2000);
<p>Wait for it...</p>
<div id="toplama_islemi">toplama_islemi</div>
<div id="cıkarma_islemi">cıkarma_islemi</div>
<div id="carpma_islemi">carpma_islemi</div>
<div id="bolme_islemi">bolme_islemi</div>
Everything is an object in JavaScript (except primitive values). If you don't want the style property values returned, do the steps separately:
var toplama_islemi = document.getElementById("toplama_islemi");
toplama.style.display = "none";
Now the element is assigned to the variable instead.
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 5 years ago.
Improve this question
I'm afraid it might be a silly question, but I have no idea what occurs my problem.
I dynamically create buttons (each button has unique id), and I store each btn reference (document.getElementById()) in simple two-dimensional array. All these because i need to hold btns in well organized structure.
The problem is: when i try to modify element by reference previously stored in my array, there appears to be no connection between ref and html element.
var Table = {
size: 10,
table: [],
generateTable: function() {
var i = 0,
j = 0,
id = null,
tablePlaceholder = document.getElementById("tableHTML");
//Generate table
for (i = 0; i < this.size; i++) {
this.table.push([]);
for (j = 0; j < this.size; j++) {
id = i.toString() + "-" + j.toString();
tablePlaceholder.innerHTML += element(id);
this.table[i].push(document.getElementById(id));
}
tablePlaceholder.innerHTML += "</br>";
}
console.log(this.table[0][0].className);
document.getElementById("0-0").className += " btn-success";
console.log(this.table[0][0].className);
}, ...
Results of last two console.logs is the same, but element has changed in DOM.
table[0][0] returns same content as document.getElementById("0-0").
(element() function returns simple html code (it works well))
innerHTML += '<div>...</div>';
This could break references to already constructed DOM elements and cause other chaos. In reality, all you want to do is append a single new element to the end.
var elem = document.createElement('div');
elem.id = id;
tablePlaceholder.appendChild(elem);
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 6 years ago.
Improve this question
I am trying to achieve is a simple remove Class function that receives the target ID and the classname wanting to remove. However I am not sure how can I get the specific classname from the var x using document.getElementById.
See below:
removeClass: function (selector, string) {
var x = document.getElementById(selector);
for ( i = 0; i < x.length; i++ ) {
x[i].classList.remove(string);
}
},
var removeClass = function (strElementId, strClassToRemove) {
var x = document.getElementById(strElementId);
x.classList.remove(strClassToRemove);
}
removeClass('a', 'b');
<div id="a" class="a b c">
test
</div>
Just get element by its id (should be unique in the html page) and use remove with class name key.
To know more about class manipulation using core JavaScript, please visit below link.
http://www.w3schools.com/jsref/prop_element_classlist.asp
First check whether the element have that class or not. Based on that remove it. Try something like this:
removeClass: function (selector, str) {
var x = document.querySelectorAll(selector);
for (i = 0; i < x.length; i++ ) {
if ( $(x[i]).hasClass(str)) {
$(x[i]).removeClass(str);
}
}
}
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 6 years ago.
Improve this question
I want to make a sidebar that dynamically create content from an object result in javascript
Object { Chemistry: Array[3], Maths: Array[1], Physics: Array[2] }
And also there are some element in Array above
I know this isn't the best way to do it, but this is an idea on how to make it:
var obj = {'Chemistry':['Chemistry1','Chemistry2','Chemistry3'],'Maths':['Maths1'],'Physics':['Physics1','Physics2']};
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function ulCreator(obj){
var menu = document.createElement("UL");
for (var key in obj) {
var node = document.createElement("LI");
var textnode = document.createTextNode(isNumber(key) ? obj[key] : key);
node.appendChild(textnode);
if(Array.isArray(obj[key])){
node.appendChild(ulCreator(obj[key]));
}
menu.appendChild(node);
}
return menu;
}
document.getElementById("main").appendChild(ulCreator(obj));
<div id="main">
</div>