Question

我想使用表单来更改我使用Javascript创建的框对象的名称和颜色值。到目前为止我使用的代码是成功创建一个框，但它没有使用表单中的值来更改颜色或名称。有关如何更改代码以获取这些值的任何建议？谢谢

    window.onload = init;

    function Box (id, name, color, coordinates) {
     this.id = id;
     this.name = name;
     this.color = color;
     this.coordinates = coordinates;
    }

    var boxes = [];

    function init() {
     var generateButton = document.getElementById("generateButton");
     generateButton.onclick = getBoxValues;
    }

    function addBox(newbox) {
     var scene = document.getElementById("scene");
     var div = document.createElement("div");
     div.className += " " + "box";
     scene.appendChild(div);
    }


  function getBoxValues() {
     var nameInput = document.getElementById("name");
     var name = nameInput.value; 

     var colorInput = document.getElementById("color");
     var color = colorInput.value;

     if (name == null || name == "") {
       alert("Please enter a name for your box");
       return;
     }
     else {
      var newbox = new Box("id", name, color, "coordinates");
      boxes.push(newbox);
      addBox(newbox); 
     }
    }

    <body>
     <form id="data">
     <ol>
      <li>Pick a name for your Amazing Box: <br>
       <label for="name">Name: </label>
        <input type="text" id="name" size="20">
      </li>
      <li>Pick a color for your Amazing Box: <br>
       <select id="color">
         <option value="red">Red</option>
         <option value="orange">Orange</option>
         <option value="yeallow">Yellow</option>
         <option value="green">Green</option>
         <option value="blue">Blue</option>
         <option value="indigo">Indigo</option>
         <option value="violet">Violet</option>
       </select>
      </li>
      <li>How many Amazing Boxes do you want to create?<br>
        <input type="radio" id="five" name="amount" value="5">
          <label for="five">5</label><br>
        <input type="radio" id="ten" name="amount" value="10">
          <lebel for="ten">10</label><br>
        <input type="radio" id="fifteen" name="amount" value="15">
          <label for="fifteen">15</label><br>
       </li>
      </ol>
      <p>
        <input type="button" id="generateButton" value="Generate!">
        <input type="button" id="clearButton" value="Clear">
      </p>
     </form>
     <div id="scene">
     </div>
     </body>

使用表单值来更改我的对象

0 个答案: