Javascript：如何通过 setAttribute 在 GetElementsByTagName 中调用数组中的值以供使用？

Question

我是 javascript 初学者，尝试在单个函数中使用 .setAttribute、数组和 GetElementsByTagName。

我想让 h1 的字体颜色根据输入的值而变化。每个值 (0-9) 对应于数组中的特定值。然后，使用多个 'if' 语句（或其他替代方式），我希望使用 .setAttribute 来更改 h1 标签的属性。

无论我如何调整我的代码，我总是得到 "Cannot read property 'setAttribute' of undefined" 或 "undefined is not a function"。有时我根本没有控制台错误，但我的代码不起作用。

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);


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

    <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

var y = document.getElementsByTagName('h1')[i].innerHTML; document.getElementsByTagName returns 一个数组不是单个元素。所以你可以明确给出一个索引并尝试。

Answer 2

setAttribute 是 singleElement 的属性，但是 document.getElementsByTagName('h1') 将 return 你一个数组而不是单个元素。使用 document.getElementsById('h1ID') 或 document.getElementsByTagName('h1')[0] 。

更多信息https://developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute

Answer 3

没有使用 innerHtml.As document.getElementsByTagName() 是基于索引的，它将 return 页面的所有 h1 元素组成的数组 more info on this。由于这里只有一个h1元素，所以应该写

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

另外最好在函数调用之外初始化数组 color[]

    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);


    };

Javascript：如何通过 setAttribute 在 GetElementsByTagName 中调用数组中的值以供使用？

Javascript: How to call a value in an array for usage in GetElementsByTagName by setAttribute?

javascript

arrays

setattribute

getelementsbytagname