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

Question

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

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

无论我如何调整代码，我总是收到“无法读取未定义的属性'setAttribute'”或“未定义不是函数”的消息。有时我根本没有收到任何控制台错误，但我的代码不起作用。

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

没有使用innerHtml。因为document.getElementsByTagName()是基于索引的，它将返回页面more info on this的所有h1元素的数组。 。由于这里只有一个 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);


    };