Javascript: как вызвать значение в массиве для использования в GetElementsByTagName с помощью setAttribute?

Question

Я новичок javascript, пытающийся использовать .setAttribute, array и GetElementsByTagName в одной функции.

Я хочу сделать так, чтобы цвет шрифта h1 менялся в зависимости от того, какое значение вводится. Каждое значение (0-9) соответствует определенному значению в массиве. Затем, используя несколько операторов if (или других альтернативных способов), я надеюсь использовать .setAttribute для изменения свойства тега h1.

Я продолжаю либо получать «Невозможно прочитать свойство» setAttribute «неопределенного», либо «undefined не является функцией», независимо от того, как я настраиваю свой код. Иногда я вообще не вижу никаких консольных ошибок, но мой код не работает.

function change() { 
 
var y = document.getElementsByTagName('h1').innerHTML; 
 
var color = ["Grey", "Blue", "Green", "Red", "Pink", "Yellow", "Orange", "Indigo", "Violet", "Black"]; 
 
var x = parseInt(document.getElementById('cn').value); 
 

 

 
\t for (var i = 0; i < color.length; i++) { 
 
    \t var bgcolor = color[i]; \t \t \t 
 
\t \t \t if (x == 1) \t { 
 
\t \t y.setAttribute("style", "color: blue;"); 
 
\t \t 
 
         } 
 
     \t \t else if (bgcolor > 9){ 
 
\t \t \t alert('Please enter a number from 0 to 9'); \t 
 
\t \t \t \t 
 
\t \t \t      } 
 
\t           } 
 
\t \t \t \t \t \t \t \t \t \t 
 
}

<h1>Header</h1> 
 
    <p> 
 
    Input a number from 0 to 9:<br> 
 
     <input type="text" id="cn"> <br>  
 
     <input type="button" value="Change" onclick="change();"> 
 
    </p> 
 
    </div>

Спасибо заранее.

Answer 1

Там нет использования innerHtml.As document.getElementsByTagName() является индексом, основанным, и он будет возвращать массив всех h1 элементов страницы more info on this. Как здесь только один элемент h1, так что вы должны написать

var y = document.getElementsByTagName('h1')[0]; 

Также лучше инициализировать цвет массива [] вне вызова функции

var y = document.getElementsByTagName('h1')[0]; 

    var color = ["Grey", "Blue", "Green", "Red", "Pink", "Yellow", "Orange", "Indigo", "Violet", "Black"]; 


    function change() { 
      var x = parseInt(document.getElementById('cn').value); 
      var clr='color:'+color[x]; 
      y.setAttribute('style',clr); 


    }; 

Answer 2

var y = document.getElementsByTagName ('h1') [i] .innerHTML; document.getElementsByTagName возвращает массив не один элемент. Таким образом, вы можете явно указать индекс и попробовать.

Answer 3

setAttribute является свойством singleElement, но document.getElementsByTagName ('h1') вернет вам массив вместо одного элемента. Либо используйте document.getElementsById ('h1ID'), либо document.getElementsByTagName ('h1') [0].

Более подробная информация https://developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute