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

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


	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() 是基于索引的，它将返回页面所有 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);


    };