javascript - 使用 javascript 使用下拉选择生成结果

这可能会非常复杂，但我会尽力使其尽可能清晰。我想知道是否可以有一个简单的 html 表单。它有 3 个下拉菜单，对于不同的变量有类似的选项，我希望能够在 JavaScript 函数中使用它们来返回总和。最终，我试图将这一切保留在本地，而不必将信息提交到服务器来返回答案，但如果这是我必须走的路，我会尝试找出答案。

示例:我的表单中有 3 个下拉菜单。它们是 numberOfDice、sidePerDice 和 constMod；所有三个下拉菜单都加载了数字(无文本字符串)numberOfDice值= 1-10，sidePerDice值= 4sides，6sides，8sides，最多20sides，constmod值是plus0，plus1，plus2等最多plus10，我相信每个人下拉列表中的选项必须有自己独特的值(如果我错了，请纠正我)

下面是表单/用户界面的 HTML。我还没有任何 JavaScript，因为我不确定这是否适用于 JavaScript，或者我是否必须使用 asp.net 或 php。 (目前尚未处理服务器端脚本，但希望很快)。

任何对此的见解将不胜感激。另外，如果您可以对表单/下拉代码提出任何建议，则该代码是否正确。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <script src="Script.js"></script>
</head>
<body>
    <form id="totalHitPoints">
    <div class="w3-container w3-center w3-blue">
    <h1>Monster Stat Generater</h1>
    </div>
    <div class="w3-container">
    <p>Number of Dice:</p>
    <select id="numberOfDice">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select>
    </div>

    <div class="w3-container">
    <p>Number of Sides per Dice</p>
    <select id="sidesPerDice">
    <option value="4sides">4</option>
    <option value="6sides">6</option>
    <option value="8sides">8</option>
    <option value="10sides">10</option>
    <option value="12sides">12</option>
    <option value="20sides">20</option>
    </select>
    </div>

    <div class="w3-container">
    <p>Constitution Modifier</p>
    <select id="constMod">
    <option value="plus0">0</option>
    <option value="plus1">1</option>
    <option value="plus2">2</option>
    <option value="plus3">3</option>
    <option value="plus4">4</option>
    <option value="plus5">5</option>
    <option value="plus6">6</option>
    <option value="plus7">7</option>
    <option value="plus8">8</option>
    <option value="plus9">9</option>
    <option value="plus10">10</option>
    </select>
    </div>
    <br>
    </form>
    <button id="form_submit" type="submit">Get Hit Points</button>

    <div class="w3-container" style="width:128px;">
        <p>Total Hit Points:</p>
        <p id="getHitPoints"class="w3-border w3-center w3-padding" style="width: 64px;">0</p>
    </div>
</body>

我认为我原来的描述不够清楚。我认为所有的解决方案(它们都很棒，并为我提供了在不久的将来会派上用场的信息)都汇总了下拉列表中的值的总和。听起来我正在尝试读回的内容。然而，我还有更多想做的事情。

我想要发生的是用户(ME)将通过下拉菜单选择变量。即 4 次骰子掷骰，其中 8 面骰子带有 + 4 修饰符。当我试图获得 4 个八面骰子 + 4 的总数时，所有解决方案似乎都采用值 (4, 8, 4) 并将它们相加总共 16。这应该返回 8 (1 ,1,1,1,4) 和 36 (8,8,8,8,4)。我希望这能解决问题。

这也可能有帮助，目前这是另一个脚本的一部分。

function getRandom() {
return Math.floor(Math.random() * 6) + 1;

对于这个函数，我希望 sidePerDie 的下拉列表将乘数更改为下拉列表的值。 4、6、8、10、12 或 20。

还有以下内容

for(var i = 0; i < 4; ++i) {
roll = getRandom();
diceTotal += roll;
d.push(roll);
}

这将掷骰子 4 次。我希望通过下拉菜单将 4 更改为我想要的卷数。

这样，当我单击“获取生命值”按钮时。该函数将多次(1-10)触发并滚动骰子类型(4、6、8 等面)，然后将修改器添加到总数中。

最佳答案

      var submit_button = document.getElementById("form_submit");
submit_button.addEventListener("click", getSum);

 function getSum() {

var constMod = parseInt(document.getElementById("constMod").value),
    sidesPerDice = parseInt(document.getElementById("sidesPerDice").value),
    numberOfDice = parseInt(document.getElementById("numberOfDice").value);

    var total=0;
    var div_to_fill = document.getElementById("getHitPoints");

    var randomVariableArray = getRandom(numberOfDice, sidesPerDice, constMod);
 console.log(randomVariableArray);
        for(var i in randomVariableArray) { 
        total += randomVariableArray[i]; 
    }
    div_to_fill.innerHTML = total;console.log(total);
}

function getRandom(numberOfDice, sidesPerDice, constMod) {
  var arr = [];
  for(var i = 0; i < numberOfDice; ++i) {
    rollDie = Math.floor(Math.random() * sidesPerDice) + 1;
    arr.push(rollDie);
  }
  arr.push(constMod);
  return arr;
}

<html>
  <head></head>
  <body>
  
    <form id="totalHitPoints">
    <div class="w3-container w3-center w3-blue">
    <h1>Monster Stat Generater</h1>
    </div>
    <div class="w3-container">
    <p>Number of Dice:</p>
    <select id="numberOfDice">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select>
    </div>

    <div class="w3-container">
    <p>Number of Sides per Dice</p>
    <select id="sidesPerDice">
    <option value="4">4 sides</option>
    <option value="6">6 sides</option>
    <option value="8">8 sides</option>
    <option value="10">10 sides</option>
    <option value="12">12 sides</option>
    <option value="20">20 sides</option>
    </select>
    </div>

    <div class="w3-container">
    <p>Constitution Modifier</p>
    <select id="constMod">
    <option value="0">0plus</option>
    <option value="1">1plus</option>
    <option value="2">2plus</option>
    <option value="3">3plus</option>
    <option value="4">4plus</option>
    <option value="5">5plus</option>
    <option value="6">6plus</option>
    <option value="7">7plus</option>
    <option value="8">8plus</option>
    <option value="9">9plus</option>
    <option value="10">10plus</option>
    </select>
    </div>
    <br>
    </form>
    <button id="form_submit" type="submit">Get Hit Points</button>

    <div class="w3-container" style="width:128px;">
        <p>Total Hit Points:</p>
        <p id="getHitPoints"class="w3-border w3-center w3-padding" style="width: 64px;">0</p>
    </div>
  
  </body>
</html>

说明:首先，您的选项值应该是整数且唯一..使您的 html 如下所示:

<form id="totalHitPoints">
    <div class="w3-container w3-center w3-blue">
    <h1>Monster Stat Generater</h1>
    </div>
    <div class="w3-container">
    <p>Number of Dice:</p>
    <select id="numberOfDice">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select>
    </div>

    <div class="w3-container">
    <p>Number of Sides per Dice</p>
    <select id="sidesPerDice">
    <option value="4">4 sides</option>
    <option value="6">6 sides</option>
    <option value="8">8 sides</option>
    <option value="10">10 sides</option>
    <option value="12">12 sides</option>
    <option value="20">20 sides</option>
    </select>
    </div>

    <div class="w3-container">
    <p>Constitution Modifier</p>
    <select id="constMod">
    <option value="0">0plus</option>
    <option value="1">1plus</option>
    <option value="2">2plus</option>
    <option value="3">3plus</option>
    <option value="4">4plus</option>
    <option value="5">5plus</option>
    <option value="6">6plus</option>
    <option value="7">7plus</option>
    <option value="8">8plus</option>
    <option value="9">9plus</option>
    <option value="10">10plus</option>
    </select>
    </div>
    <br>
    </form>
    <button id="form_submit" type="submit">Get Hit Points</button>

    <div class="w3-container" style="width:128px;">
        <p>Total Hit Points:</p>
        <p id="getHitPoints"class="w3-border w3-center w3-padding" style="width: 64px;">0</p>
    </div>

接下来你的 JavaScript 函数添加一个事件监听器点击:

var submit_button = document.getElementById("form_submit");
submit_button.addEventListener("click", getSum);

然后定义计算总和的实际函数。然后首先将选项解析为int:

function getSum() {

var constMod = parseInt(document.getElementById("constMod").value),
    sidesPerDice = parseInt(document.getElementById("sidesPerDice").value),
    numberOfDice = parseInt(document.getElementById("numberOfDice").value);

然后使用另一个函数getRandom，它以数组形式获取随机骰子的数量

var randomVariableArray = getRandom(numberOfDice, sidesPerDice, constMod);

function getRandom(numberOfDice, sidesPerDice, constMod) {
  var arr = [];
  for(var i = 0; i < numberOfDice; ++i) {
    rollDie = Math.floor(Math.random() * sidesPerDice) + 1;
    arr.push(rollDie);
  }
  arr.push(constMod);
  return arr;
}

然后循环数组并添加所有值

for(var i in randomVariableArray) { 
            total += randomVariableArray[i]; 
        }

使用 innerHtml 填充 div

var div_to_fill = document.getElementById("getHitPoints");
div_to_fill.innerHTML = total;console.log(total);

}

总的来说，你的 js 会是

    var submit_button = document.getElementById("form_submit");
submit_button.addEventListener("click", getSum);

 function getSum() {

var constMod = parseInt(document.getElementById("constMod").value),
    sidesPerDice = parseInt(document.getElementById("sidesPerDice").value),
    numberOfDice = parseInt(document.getElementById("numberOfDice").value);

    var total=0;
    var div_to_fill = document.getElementById("getHitPoints");

    var randomVariableArray = getRandom(numberOfDice, sidesPerDice, constMod);
 console.log(randomVariableArray);
        for(var i in randomVariableArray) { 
        total += randomVariableArray[i]; 
    }
    div_to_fill.innerHTML = total;console.log(total);
}

function getRandom(numberOfDice, sidesPerDice, constMod) {
  var arr = [];
  for(var i = 0; i < numberOfDice; ++i) {
    rollDie = Math.floor(Math.random() * sidesPerDice) + 1;
    arr.push(rollDie);
  }
  arr.push(constMod);
  return arr;
}

fiddle 链接:[https://jsfiddle.net/qfxvydmp/][1]

关于javascript - 使用 javascript 使用下拉选择生成结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36024866/

javascript - 使用 javascript 使用下拉选择生成结果

上一篇：javascript - 防止使用“无显示”按钮提交 Jquery 表单上的页面加载

下一篇：javascript - 传单标记均具有相同的值