This question already has answers here:
Iterating over result of getElementsByClassName using Array.forEach
(14 answers)
Closed 7 months ago.
I have below div tag from material UI which is getting autogenerated through MUI -
<div class="MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault">Some Text</div>
Through javascript , I am fetching this element as -
var ele=document.getElementsByClassName("MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault");
console.log(ele);
In console log I am able to see element with all its properties including innerHTML as Some Text
When I am trying to change the InnerHTML by -
ele[0].innerHTML="Changed Text" , I am not able to see that text got changed.
Also , before this , when I try to log innerHTML -
console.log(ele[0].innerHTML) , I am getting blank result.
How can I change the inner HTML from HTML Collection I am fetching ?
You have missed two things:
Typo in getElementsByClassName -> should be getElementByClassName
If you put spaces in your class name inside getElementsByClassName like MuiAvatar-root MuiAvatar-circular, its not correct.
var ele = document.getElementsByClassName("MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault");
ele[0].innerHTML = "TEST"
<div class="MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault">Some Text</div>
Related
This question already has answers here:
ID Ends With in pure Javascript
(6 answers)
Closed 3 years ago.
I need to get the ID of an element but the value is dynamic with only the end of it is the same always.
Heres a snippet of the code.
<TABLE ID="_MIPS-LRSYSCPU">
The ID always ends with '-LRSYSCPU' then the _MIPS is dynamic.
How can I get the ID using just JavaScript and not jQuery? thanks
Use the selector [id$="<END OF ID HERE>"]:
const table = document.querySelector('[id$="-LRSYSCPU"]');
console.log(table);
<TABLE ID="_MIPS-LRSYSCPU">
Similarly, by using ^ instead of $, you can select elements who attributes start with a certain string:
const table = document.querySelector('[id^="_MIPS"]');
console.log(table);
<TABLE ID="_MIPS-LRSYSCPU">
And *= to select elements who attributes contain a certain string:
const table = document.querySelector('[id*="LRS"]');
console.log(table);
<TABLE ID="_MIPS-LRSYSCPU">
This question already has answers here:
How to get value of a div using javascript
(7 answers)
Closed 3 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
I had this problem when I get the value from a div:
function sync(){
var n1 = document.getElementById('editor').value;
alert(n1);
var n2 = document.getElementById('news');
n2.value = n1;
}
div with id editor looks like this:
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
When I put something in that div it will alert me undefined and that will also come in the textarea i paste it in too. So the problem is obviously by this:
var n1 = document.getElementById('editor').value;
What am I doing wrong?
Try this
var n1 = document.getElementById('editor').innerHTML; // or innerText, or textContent
I think it's important to note that even if <div> was a HTMLInputElement you would still keep getting undefined because your div,
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
Has no value attribute, here is an example of a div with a value attribute:
<div class='message' id='editor' value='hello'></div>
However, as mentioned in other answers, even though you have entered a value it, .value will still return undefined because <div> is a HTML element and not a HTMLInputElement.
If you really need to store some information in the value of the div you can always do something like this:
<div id="mydiv"></div>
<script>document.getElementById('mydiv').value='hello';</script>
Right after the div loads, you force 'hello' as the value.
The only reason you'd do this is if you really want to store data within the div's value and can't store it within the innerHTML because the div is visible.
If you want to store the information within your div like this:
<div id="editor">all the information i want to store</div>
Then document.getElementById('editor').innerHTML; is the correct solution, but remember that users will be able to see the information on the webpage.
HTML Elements and HTMLInputElements are different things.
The value attribute is present in HTMLInputElement in HTMLInputElement Reference
div elements are HTMLElement
If you change your div to input your Javascript will work fine.
The option is to use innerHTML as said in another answer but be aware that this could be HTML fragment at times if you don't control the HTML or over time forget the Javascript and can lead to defects as things.
FYI plain elements attribute reference(there is no value)
This question already has an answer here:
Prepend divs without closing them
(1 answer)
Closed 7 years ago.
I am very confused how the append function works. After I tried using append 3 times, It shows very different from single append function.
In javascript (Append 1 time)
var divStep = $("#stepTab");
divStep.append('<div style="width:400px;height:40px;float:left;clear:left;"><input type="checkbox" />Test</div>');
In javascript (Append 3 times)
var divStep = $("#stepTab");
divStep.append('<div style="width:400px;height:40px;float:left;clear:left;">');
divStep.append('<input type="checkbox" />Test');
divStep.apend('</div>');
In html
<div id="stepTab">
</div>
I found that the append 1 time method worked well as I expected. The another one is very baffling.
Please can someone explain me a little bit about the difference of these 2 methods? I tried to search on the internet but I can't even know a keyword for the search.
I'm very poor in English. So sorry if it is an ambiguous question.
Thank you in advance.
Yea... Let's see what happened every time you append something to the element.
var divStep = $("#stepTab");
divStep.append('<div style="width:400px;height:40px;float:left;clear:left;"><input type="checkbox" />Test</div>');
console.log(divStep.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stepTab"></div>
return <div style="width:400px;height:40px;float:left;clear:left;"><input type="checkbox">Test</div>
var divStep = $("#stepTab");
divStep.append('<div style="width:400px;height:40px;float:left;clear:left;">');
console.log(divStep.html());
divStep.append('<input type="checkbox" />Test');
console.log(divStep.html());
divStep.append('</div>');
console.log(divStep.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stepTab"></div>
it returns
#1 <div style="width:400px;height:40px;float:left;clear:left;"></div>
add <div...left;"> and </div> automatically.
#2 <div style="width:400px;height:40px;float:left;clear:left;"></div><input type="checkbox">Test
#3 <div style="width:400px;height:40px;float:left;clear:left;"></div><input type="checkbox">Test
nothing added.
Conclusion: I suppose that the string will be automatically turned into a complete html element/object, instead of appending the html string directly to the innerHTML of the parent node. Because </div> can't be turned into a html element since it is not a fully enclosed HTML, so nothing happened in #3 append.
.appennd is not a native javascript function. its a jQuery method.
The append() method inserts specified content at the end of the selected elements.
In your code append 3 won't work as you expected since it is not a fully enclosed HTML, but 3 sibling dom elements.
This question already has answers here:
How to add/remove a class in JavaScript?
(13 answers)
Closed 7 years ago.
I have the following classes (below), they are added dynamically on the HTML (below).
I have classes already present, what Javascript recommended code should be used to remove one or all of these classes if they are already present on the html below. The function I am building, will reset the element, I NEED the current classes to be present, but the colour classes need to be removed if one / multiple values are present.
HTML
<div id="overlay__inner" class="overlay__inner overlayActive clearfix"></div>
Classes
<ul>
<li>is--blue</li>
<li>is--red</li>
<li>is--yellow</li>
<li>is--purple</li>
<li>is--green</li>
<li>is--pink</li>
<li>is--orange</li>
</ul>
UPDATE:
So in a nutshell, I want to do this jQuery example in javascript:
$('#overlay__inner').removeClass('is--blue is--red is--yellow is--purple is--green is--pink is--orange');
This is what I have so far:
document.getElementById('overlay__inner').classList.remove('is--blue').classList.remove('is--red').classList.remove('is--yellow').classList.remove('is--purple').classList.remove('is--green').classList.remove('is--pink').classList.remove('is--orange');
But I get this error:
Uncaught TypeError: Cannot read property 'classList' of undefined
Removing a single class is rather straightforward, what are you having trouble with specifically?
var els = document.querySelectorAll('.is--blue');
Array.prototype.forEach.call(els, function(el) {
el.classList.remove('is--blue');
});
.is--blue {
color: blue;
}
<p class="is--blue something-else">Sample</p>
<p class="is--blue">Sample</p>
This question already has answers here:
How to get value of a div using javascript
(7 answers)
Closed 3 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
I had this problem when I get the value from a div:
function sync(){
var n1 = document.getElementById('editor').value;
alert(n1);
var n2 = document.getElementById('news');
n2.value = n1;
}
div with id editor looks like this:
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
When I put something in that div it will alert me undefined and that will also come in the textarea i paste it in too. So the problem is obviously by this:
var n1 = document.getElementById('editor').value;
What am I doing wrong?
Try this
var n1 = document.getElementById('editor').innerHTML; // or innerText, or textContent
I think it's important to note that even if <div> was a HTMLInputElement you would still keep getting undefined because your div,
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
Has no value attribute, here is an example of a div with a value attribute:
<div class='message' id='editor' value='hello'></div>
However, as mentioned in other answers, even though you have entered a value it, .value will still return undefined because <div> is a HTML element and not a HTMLInputElement.
If you really need to store some information in the value of the div you can always do something like this:
<div id="mydiv"></div>
<script>document.getElementById('mydiv').value='hello';</script>
Right after the div loads, you force 'hello' as the value.
The only reason you'd do this is if you really want to store data within the div's value and can't store it within the innerHTML because the div is visible.
If you want to store the information within your div like this:
<div id="editor">all the information i want to store</div>
Then document.getElementById('editor').innerHTML; is the correct solution, but remember that users will be able to see the information on the webpage.
HTML Elements and HTMLInputElements are different things.
The value attribute is present in HTMLInputElement in HTMLInputElement Reference
div elements are HTMLElement
If you change your div to input your Javascript will work fine.
The option is to use innerHTML as said in another answer but be aware that this could be HTML fragment at times if you don't control the HTML or over time forget the Javascript and can lead to defects as things.
FYI plain elements attribute reference(there is no value)