Изменение цвета (onclick) с помощью Javascript

Я кодировал веб-сайт и пытался изменить несколько цветов и изображений onclick с помощью JavaScript для изменения CSS. Однако этот код работает только частично. Только поле «txtArea» изменяет цвет. Проверял валидаторы и консоли свой идеальный синтаксис.Изменение цвета (onclick) с помощью Javascript

<!-- This is the button to change the color, Its 1 bulletin point. --> 
<div id="colorSelector"><span id="chngBlue"><a href="#" onclick="chngColor()">&bull;</a></span> &bull; &bull;</div> 

<script> 
var colors = ["#0099cc", "#669900", "#993333"];//Blue, Green, Red 

function chngColor(){ 
document.getElementById("txtArea").style.backgroundColor = colors[2]; 
document.getElementsByClassName("labHdr").style.backgroundColor = colors[2]; 
document.getElementById("newLink").style.color = colors[2]; 
document.getElementById("hdBanner").src='bannerred.png'; 
} 
</script>

источник

2016-10-15 Kristian Orphe

Reading [Документы] (https://developer.mozilla.org/en-US/docs/Web/ API/document.getElementsByClassName) всегда полезно. Вы также должны проверить консоль (нажмите F12), появится сообщение об ошибке. – Teemu

@Teemu Спасибо, что «документы» помогли сделать мой код немного короче. Но я, похоже, следую всем рекомендациям и не сообщаю об ошибках в консоли. Я даже сделал двойной прием идентификаторов тегов. hmm .. –

Должно быть сообщение об ошибке. Вы пытаетесь установить 'collection.style.backgroundColor', коллекция не имеет свойства' style', а установка 'backgroundColor'' null' обязательно вызовет ошибку. См. Данные ответы, все они объясняют, как получить членов коллекции. – Teemu

document.getElementsByClassName ("labHdr") возвращает HTMLCollection (Спасибо @Teemu для осветления), так что есть не 'стиль'. Вы можете сделать что-то вроде

var myElements = document.getElementsByClassName("labHdr"); 

for (var i = 0; i < myElements.length; i++) { 
    myElements[i].style.color = colors[2]; 
}

источник

2016-10-15 15:56:08 aleksejjj

Нет, он не возвращает массив элементов, он возвращает live [HTMLCollection] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) – Teemu

В любом случае нам нужно что-то например var myElements = document.getElementsByClassName ("labHdr"); для (var i = 0; i aleksejjj

Да, пожалуйста, положите его в сообщение ypur. Обратите внимание, что вы не можете использовать forexample 'forEach' для итерации коллекции, так как это не массив. Вот почему важно знать, с каким объектом вы работаете. – Teemu

getElementsByClassName возвращает массив как объект, так что вам нужно проиндексировать в этот массив, даже если он содержит только один элемент.

Так вторая строка функции становится:

document.getElementsByClassName("labHdr")[0].style.backgroundColor = colors[2];

http://codepen.io/markwill/pen/rrAXzr

Если есть более чем один элемент с этим классом вам необходимо перебрать их все настройки стиля (это безопаснее, чем просто предположить, что есть только один).

источник

2016-10-15 16:16:58

Заменить:

function chngColor(){ 
    document.getElementById("txtArea").style.backgroundColor = colors[2]; 
    document.getElementsByClassName("labHdr").style.backgroundColor = colors[2]; 
    document.getElementById("newLink").style.color = colors[2]; 
    document.getElementById("hdBanner").src='bannerred.png'; 
}

тем, что:

function chngColor(){ 
    var labelList = document.querySelectorAll(".labHdr"); 
    document.getElementById("txtArea").style.backgroundColor = colors[2]; 
    document.getElementById("newLink").style.color = colors[2]; 
    document.getElementById("hdBanner").src='bannerred.png'; 

    Array.prototype.map.call(labelList, function(element) { 
     element.style.backgroundColor = colors[2]; 
    }); 

}

С этим все ваши этикетки будут изменения.

источник

2016-10-15 17:24:41

Вы можете просто получить элемент по идентификатору для изменения цвета ниже примера, который получить больше идей

<h1 id="id1">My Heading 1</h1> 
<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'"> 
Click Me!</button>

источник

2016-10-16 12:13:00 bharat

Изменение цвета (onclick) с помощью Javascript

ответ

Смежные вопросы