Question

我是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()">有问题吗？

我真的很害怕这可能是一个愚蠢的问题...我试图自己学习，但有时我迷路了，似乎无法提出正确的问题...

提前谢谢！ ☺

Answer 1

这是由您的for循环条件引起的。您可能会得到“数组索引越界”异常。

您使用

z <= enumField.length

但应该是

z < enumField.length

Answer 2

实际上，您循环的次数超出了您的需要。由于数组的索引为零，因此您不需要z <= enumField.length，而希望z < enumField.length。由于此错误使功能停止，因此没有任何继续。

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 + '.- ';
        console.log(enumField[z]);
        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>

Javascript-仅加载第一个函数

2 个答案: