There is a class

<div class="box> text </div>

And there is a button

 <input type="button" value="Текст" onclick="document.getElementByClassName('box').style.background ='red'"/>

Can not change the background div `a. Can I not correctly address the class?

3 answers 3

Yes, it is written incorrectly, below 2 working options:

 <div class="box">text</div> <hr /> <input type="button" value="Хочу красный" onclick="document.querySelector('.box').style.background ='red'" /> <input type="button" value="Хочу зелёный" onclick="document.getElementsByClassName('box')[0].style.background ='green'" />

  • It is a pity that when he adds more divs with the same class - the first option will not work for them all) - Alexey Shimansky
  • @ Alexey Shimansky, of course, you should always assume all the options, but if this is not implied in the question, then this may never be the case. For example, you also did not take into account the option that you need to paint these several blocks in different colors and each with your own button, otherwise painting all the blocks with one color with one button is somehow impractical :) - MasterAlex
  • It's just that, I think, it's not for nothing that the class is installed there. That's all) It is quite possible to paint in one color, why not ?. Maybe these are tiles for photos, and this will be their design) - Alexey Shimansky

First of all: you have not closed the quotation mark at class="box . Must be class="box"

Secondly: you need to write getElement S ByClassName , because the collection of elements is selected according to the class.

Thirdly: since this is a collection, an array, it means that you need to access the collection element and only set the property:

 <div class="box"> text </div> <input type="button" value="Текст" onclick="document.getElementsByClassName('box')[0].style.background ='red'"/>

For coloring all elements of the class .box you need to organize a cycle, emnip

Like that:

 <div class="box"> text </div> <div class="box"> text22 </div> <div class="box"> text333 </div> <input type="button" value="Текст" onclick="var x = document.querySelectorAll('.box'); for (var i = 0; i < x.length; i++) { x[i].style.backgroundColor = 'green'; }"/>

In general, it is better to remove the script from the markup, because it is awful to watch

 document.querySelector("#test").addEventListener("click", modifyBG, false); function modifyBG() { var x = document.querySelectorAll(".box"); for (var i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; } } 
 <div class="box"> text </div> <div class="box"> text222 </div> <div class="box"> text33 </div> <input type="button" value="Текст" id="test"/>

And it is worth making styles in css , and in the script only assign the necessary classes, identifiers, etc.

 document.querySelector("#test").addEventListener("click", modifyFunc, false); function modifyFunc() { var x = document.querySelectorAll(".box"); for (var i = 0; i < x.length; i++) { x[i].classList.add('my-style'); } } 
 .my-style { background: #ff0000; border: 3px solid green; padding: 10px; margin: 10px; } 
 <div class="box"> text </div> <div class="box"> text222 </div> <div class="box"> text33 </div> <input type="button" value="Текст" id="test"/> 

     .box { background: yellow; width: 200px; height: 200px; } 
     <div class="box"></div> <input type="button" value="Текст" onclick="document.querySelector('.box').style.background='red'"/>