首页 > 解决方案 > Javascript-仅加载第一个函数

问题描述

我是 JavaScript 新手,在尝试使我的函数正常工作时遇到了麻烦。

function myFunction() {

  // This part appends a number before a label with the class "enum"

  var enumField = document.getElementsByClassName('enum');
  for (var z = 0; z <= enumField.length; z++) {
    var span = document.createElement('span');
    span.innerHTML = z + 1 + '.- ';
    enumField[z].parentNode.insertBefore(span, enumField[z]);
  }

  //This other part changes the background color of an element with the class "fieldsetColor"

  var fieldsetStyle = document.getElementsByClassName('fieldsetColor');
  for (var i = 0; i <= fieldsetStyle.length; i++) {
      fieldsetStyle[i].style.backgroundColor = 'palegoldenrod';
  }
}
<body onload="myFunction();">
  <div>Student</div>
  <form id="myForm">
    <fieldset class="fieldsetColor">
      <legend>Personal Data </legend>
      <img src="http://via.placeholder.com/100x100?text=Placeholder"><br>
      <label class="reqInput enum"  for="nombreInput">Nombre: </label>
      <input id="nombreInput" name="nombre" type="text">
      <label class="reqInput enum"  for="nombreInput">Nombre: </label>
      <input id="nombreInput" name="nombre" type="text"> 
      <label class="reqInput enum"  for="nombreInput">Nombre: </label>
      <input id="nombreInput" name="nombre" type="text">
    </fieldset>
  </form>
</body>

主要问题是只有函数的第一部分起作用(枚举的部分),而第二部分不起作用。

如果我交换第一部分和第二部分的位置,也会发生同样的情况(仅更改背景颜色)。

可能是什么问题呢?我的语法错了吗?有什么问题<body onload="myFunction()">吗?

我真的很害怕这可能是个愚蠢的问题...我正在尝试自己学习,但有时我会迷路并且似乎无法提出正确的问题...

提前致谢!☺</p>

标签: javascript

解决方案


这是由您的 for 循环条件引起的。您可能会得到一个数组索引超出范围异常。

你用

z <= enumField.length

但应该是

z < enumField.length

推荐阅读