我想有一个下拉菜单，你选择的数字，而不是变量

Question

"var aantal = 10"给了我10个三角形，但我希望用户插入自己的三角形数量。

      var aantal = 10;   
      var triangle = [];
      for (var i = 0; i < aantal; i++){
          triangle[i] = new Triangle;
          triangle[i].xLeft = 20 + 30*i;
          triangle[i].yLeft = 20 + 20*i;
      }

Answer 1

在浏览器中请求用户输入的一种快速简便的方法是通过Window.prompt方法。

这将停止您的代码，直到用户在弹出窗口中按下"确定"或"取消"。当用户填写一个值并按"OK"键时，返回该值为string。下面是一个例子:

var userInput = prompt("How many triangles do you want?", 10);
var count = parseInt(userInput, 10);
for (var i = 0; i < count; i += 1) {
  console.log("Triangle " + i);
}

注意，您需要显式地将string转换为number。此外，您可能想要检查null或NaN:当用户按下"取消"或填写无效数据时，您需要有一个回退。

一旦这工作，您可能想要尝试创建一个<input type="number"> HTML元素，并从那里获取数据。

Answer 2

我认为Bas是要求一个html下拉列表，触发一个函数，像这样:

<!-- /JavaScript code-->
<script>
  function setTriangles(value) {
    var aantal = eval(value);//evaluate the input as it's coming as a string
    if (aantal == 0) { //do nothing if the user has picked the description "Select number of triangles" in the drop down
      return;
    }
    var triangle = [];
    for (var i = 0; i < aantal; i++) {
      triangle[i] = new Triangle;
      triangle[i].xLeft = 20 + 30 * i;
      triangle[i].yLeft = 20 + 20 * i;
    }
  }
</script>
<!-- /end of JavaScript code-->
<!-- /HTML code-->
<select id="input" onChange="setTriangles(this.value);">
  <option value="0">Select number of triangles</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
</select>
<!-- /end of HTML code-->