How do I change the text of all elements in a class
If the element is in a division do I need to do anything else?
P.S. I hardly know js so plz help.
enter image description here
You can use querySelectorAll and with a foreach set the new text:
const examples = document.querySelectorAll('.example');
examples.forEach(example => {
example.innerHTML = 'new text';
});
<div class="example">
text 1
</div>
<div class="example">
text 2
</div>
I hope these examples can help you
function myFunction()
{
x=document.getElementsByClassName("infoblock"); // Find the elements
for(var i = 0; i < x.length; i++){
x[i].innerText="text changed!"; // Change the content
}
}
function myFunction2()
{
x=document.getElementsByClassName("notationgrade"); // Find the first span elements
y=document.getElementsByClassName("percentgrade"); // Find the second span elements
for(var i = 0; i < x.length; i++){
x[i].innerText="text 1 changed!"; // Change the content
}
for(var i = 0; i < y.length; i++){
y[i].innerText="text 2 changed!"; // Change the content
}
}
<body>
<div class="class-stats fsClassStatsAverage">
<p><span class="infoblock notationgrade">old text 1 </span></p>
<p> <span class="infoblock percentgrade">old text 2</span></p>
</div>
<button type="button" onclick="myFunction()">Change All Spans</button>
<button type="button" onclick="myFunction2()">Change Each Span</button>
</body>
Related
My HTML
<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<button id="button">button</button>
My js
var button = document.querySelector('#button');
var chapter = document.querySelectorAll('.chapter');
for(var i = 0; i < chapter.length; i++){
button.addEventListener('click', function(){
for(var i = 0; i < chapter.length; i++) {
chapter[i].classList.add('active');
}
});
}
This adds the class of "active" on clicking the button.
But toggle doesn't work. Instead of
chapter[i].classList.add('active');
When I do,
chapter[i].classList.toggle('active');
the class of "active" does not toggle. console shows no error.
So I tried to check the class of "active" first & remove the class if the class exists. I know I was trying to reinvent the toggle function; as stated above, toggle wasn't working so I tried it anyway.
if (chapter[i].contains('active')){
chapter[i].classList.remove('active');
And I got a slew of error messages. This is as far as I got. I somehow felt that this wasn't going to work but just tried it anyway.
I am stumped.
Can anyone point out why classList.toggle isn't working in my code & how this can be fixed?
Thanks.
You have one too many loop. Remove the outer one:
var button = document.querySelector('#button');
var chapter = document.querySelectorAll('.chapter');
button.addEventListener('click', function(){
for(var i = 0; i < chapter.length; i++) {
chapter[i].classList.toggle('active');
}
});
.active{
color: red;
}
<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<button id="button">button</button>
var button = document.querySelector('#button');
var chapters = document.querySelectorAll('.chapter');
button.addEventListener('click', function(){
for(var index = 0; index < chapters.length; index++) {
if(chapters[index].classList.contains('active')){
chapters[index].classList.remove('active');
}else{
chapters[index].classList.add('active');
}
}
});
.active {
color: red;
}
<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<button id="button">Toggle Color</button>
Hello I am kind of stuck right now. I am trying to make my script choose all paragraph inside a div class of change but I don't really understand how to do it. The html looks something like this in the body
<body>
<div id="top" class="change">
<p> Microsoft </p>
<p> Apple </p>
<p> Sony </p>
</div>
<div id="middle">
<p> Disney </p>
<p> Nintendo </p>
<p> Sony </p>
</div>
<div id="bottom" class="change">
<p> Ice</p>
<p> Tea</p>
<p> Water</p>
</div>
</body>
I am trying to make it so when the mouse cursor touches anything that has a class of change in a paragraph, it will change the color to a color of my choice but I don't know how to do it with selectors with pure javascript. This is the current code I have but it is not working. I can only use javascript
var fontChange = document.getElementsByClass("change").getElementsByTagName("p");
for (let i = 0; i < changeFont.length; i++) {
changeFont[i].onmouseover=function() {
this.style.color = "red";
}
}
for (let i = 0; i < changeFont.length; i++) {
changeFont[i].onmouseout=function() {
this.style.color = "black";
}
}
There's no function getElementsByClass, it's getElementsByClassName.
document.getElementsByClassName() returns a collection (see What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?), you have to index it to use getElementsByTagName on the elements that it returns.
var fontChange = [];
var change = document.getElementsByClassName("change");
for (var i = 0; i < change.length; i++) {
var paras = [].slice.call(change[i].getElementsByTagName("p"));
fontChange.concat(paras);
}
Or you could just use querySelectorAll
var fontChange = document.querySelectorAll(".change p");
You also have a typo. You set the variable fontChange, but then use changeFont in the loop.
You can achieve what you want without javascript, just add this code to your css
.change p:hover {
color: red;
}
I need a little help, this may seem easy, but I have an invert colors button on my webpage, and I would need to loop through elements with the class name of text.
Here's the code:
//Javascript File
var text = document.getElementsByClassName('text');
var button = document.getElementById('invertcolors');
function onClick() {
for (var i = 0; i < text.length; i++) {
//Do something like this:
//text[i].style.color =
}
}
button.addEventListener('click', onClick, false);
<!--Stuff here...-->
<div id="content">
<font id="text1" class="text">I walked in the forest</font>
<br>
<font id="text2" class="text">Through the grey concrete path</font>
<br>
<font id="text3" class="text">Holding on the dog</font>
</div>
<!--Stuff here...-->
I need to loop through the elements in the i variable, and set their color to white. I don't know how, can someone help? Thanks!
Please check the javascript code below:
var text = document.getElementsByClassName('text');
var button = document.getElementById('invertcolors');
function onClick() {
var selectedId
console.log(text[0].getAttribute( 'id' ));
for (var i = 0; i < text.length; i++) {
console.log(text[i].getAttribute('id'));
selectedId = text[i].getAttribute('id');
document.getElementById(selectedId).style.color = "white";
}
}
button.addEventListener('click', onClick, false);
And also check the code # https://jsfiddle.net/cskcvarma/akLx5tt8/7/
Please let me know if this helps.
var text = document.getElementsByClassName('text');
var button = document.getElementById('invertcolors');
function onClick(text) {
for (var i = 0; i < text.length; i++) {
text[i].style.color = '#fff';
}
}
button.addEventListener('click', onClick.bind(null, text), false);
You pretty much have the exact code you would need, see below for a working version of what you wanted.
var text = document.getElementsByClassName('text');
var button = document.getElementById('invertcolors');
function onClick() {
for (var i = 0; i < text.length; i++) {
text[i].style.color = '#f00';
}
}
button.addEventListener('click', onClick, false);
#invertcolors {
height:20px;
width:100px;
border:1px solid black;
border-radius:7px;
}
<div id="content">
<font id="text1" class="text">I walked in the forest</font>
<br>
<font id="text2" class="text">Through the grey concrete path</font>
<br>
<font id="text3" class="text">Holding on the dog</font>
</div>
<div id='invertcolors'>Button</div>
You can use querySelectorAll method to do that. The <font> element is not supported in HTML5 so you should replace it with for example <span> element.
var button = document.getElementById('click');
button.addEventListener('click',function(){
var elements = document.querySelectorAll('.text');
elements.forEach(function(a){
a.style.backgroundColor = 'yellow';
});
});
<div id="content">
<span id="text1" class="text">I walked in the forest</span>
<br>
<span id="text2" class="text">Through the grey concrete path</span>
<br>
<span id="text3" class="text">Holding on the dog</span>
</div>
<br/>
<button id="click">change style</button>
This code is supposed to be looping and adding multiple divs, but it isn't working. When I click it, only one div appears. If I click again, nothing happens.
<body>
<div class="start" >
<div id = "coba">
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function () {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
Thanks for your help
Your code does not work because you did not do anything with the variable "i" in the for statement. If you look at the fiddles of user2181397 & meghan Armes you will see how they added a line in the script to put it to work.
I tested the below in my IDE and it works just fine:
<body>
<div class="start" style="margin-top:50px; color:black;">
<div id = "coba">
<p>Click Me</p>
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function() {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
di.innerHTML=i;
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
my page is full of php-generated content split in div's that have the same class but no id's. I want to show some buttons that allow me to manage, change and delete the div's; the buttons should be able to change the class, delete the div and select the content of the div.
How can I do this? is there a way to set the button's onclick action to something, say ... onclick="changetheclass(this)" that would actually change the class of the div containing this button?
Man I feel I'm not making any sense here :(
Did anyone understand what I'm talking about? If so, is there any possibility to do this?
Thanks in advance!
:)
EDIT: this is one of the divs, so that you could understand what I'm talking about:
<div class="box"><p>
this is the content of the div
<button onclick="change_the_class(this_div_or_something)">click here to change the class of the div</a>
<button onclick="select_the_content(this_div_or_something)">click here to change the class of the div</a>
<button onclick="delete_the_whole_div(this_div_or_something)">click here to change the class of the div</a>
</p></div>
Is this what you looking for ??
<html>
<head>
<script type="text/javascript">
function changeClass(elm) {
elm.parentNode.className ='newcss';
}
function deleteDiv(elm) {
var par = elm.parentNode;
var gran = par.parentNode;
gran.removeChild(par);
}
</script>
</head>
<body>
<div class='test'>
Hello
<button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
<button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
</div>
<div class='test'>
Hello
<button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
<button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
</div>
<div class='test'>
Hello
<button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
<button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
</div>
<div class='test'>
Hello
<button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
<button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
</div>
</body>
</html>
in JS, you can use querySelectorAll:
//get all divs with class "myDiv"
var divs = document.querySelectorAll('div.myDiv');
//for each of the gathered divs, do something with it
for(var i=0; i< divs.length;i++){
var aDiv = divs[i];
//"aDiv" is a div in the collection of matched divs
//you can do anything with it: add buttons etc.
}
First stay away from onclick="something" - inline JavaScript. then yes you can still manage to do what you want to do without ids.
var divs = document.getElementsByTagName('div'),
result = [],
len = divs.length,
i = 0,
aLink;
for(; i < len; i++){
// update the condition if there can be more than one class name as this assume a single class name
if (divs[i].className == 'myClassName') result.push(divs[i]);
}
len = result.length;
i = 0;
for (; i < len; i++) {
aLink = document.createElement('a');
aLink.innerHTML = 'Edit';
aLink._parent = result[i]; // store a reference to the parent div
aLink.href = '#';
aLink.onclick = function(ev) {
ev.preventDefault();
// do your edit stuff here, ev.target._parent contain the targetted div
};
result[i].appendChild(aLink);
}
$('div.my-class').each( function( index, element ){
var div = $( element ); // not sure if this is needed
// add the buttons, e.g. via div.html('');
// add the buttons' click handlers
});