Question

这可能会非常复杂，但我会尽量保持清醒。我试图找出是否有可能有一个简单的HTML表单。这有3个下拉菜单，对于不同的变量有类似的选项，我希望能够在JavaScript函数中使用它来返回总和。最终我试图保持这个本地所有本地，而不必将信息提交给服务器以返回答案，但如果这是我必须去的方式，我会试着弄明白。

示例：我在表单中有3个下拉列表。它们是numberOfDice，sidesPerDice和constMod;所有三个下拉都加载了数字（没有文本字符串）numberOfDice值= 1-10，sidesPerDice值= 4sides，6sides，8sides，最多20sides，constmod值是plus0，plus1，plus2等upto 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个带有+4改性剂的8面骰子的模具卷。当我试图获得总共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等），然后将修改器添加到总数中。

Answer 1

这确实是可能的。这篇关于eduMaven的文章很好地展示了如何做到这一点：http://edumaven.com/javascript-programming/get-value-of-selected-option。这篇文章给出了一个纯JS的例子：

var selector = document.getElementById('id_of_select');
var value = selector[selector.selectedIndex].value;

这很容易做到纯粹的JS，但在jQuery中另一个搜索相同问题的方法就是这个例子：https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/。这篇文章表明jQuery方式只是：

var value = $( "#myselect" ).val();

有点不清楚你想要对这些信息做些什么。我假设您根据所做的事情表示您希望在用户点击“提交”时对所选值执行某些操作，而不实际发送HTTP请求。

要执行此部分，我实际上会跳过按钮的“提交”类型，而是为按钮定义“onclick”事件，如下所示：http://www.w3schools.com/jsref/event_onclick.asp。给出的例子是：

<button onclick="myFunction()">Click me</button>

然后，您需要在JS文件中定义一个函数，以实际执行您想要执行的任何计算。这可能是你想要的任何计算 - 这只是操纵javascript变量的问题。从您上面所说的内容来看，它看起来像是：

function myFunction(){

    // get the integer values from your select options
    var numDice = parseInt( $( "#numberOfDice" ).val() );
    var sidesDice = parseInt( $( "#sidesPerDice" ).val() );
    var mod = parseInt( $( "#constMod" ).val() );

    // "roll" numDice times
    var sum = 0;
    for (i = 0; i < numDice; i++) { 
        // roll a random number and add mod, then add to sum
        sum += Math.floor((Math.random() * sidesDice) + 1) + mod;
    }

    // output answer in whatever form you see fit -- 
    // could be put back into the html (as shown in the links provided), printed to console, or used in a later calculation
    console.log(sum);
}

我希望这次演练能够帮助你和其他人指出正确的方向。但是，你应该真正研究一下使用jQuery JS来选择html元素的一些基础知识 - 这实际上是这些技术的基本用例！在尝试盲目理解之前，先熟悉基础知识对你有所帮助。网上有大量的资源，包括我链接到的资源（通过快速搜索找到的资料;据说，知道正确的搜索条件可以说是非常棘手的）。

Answer 2

首先 - 从每个选项元素中删除value属性，因为这样可以在从select元素中获取值时更轻松

async.eachSeries()

您也可以删除表单元素。您需要向按钮添加一个JavaSCript事件，以便在您单击按钮后知道该怎么做。

<div class="w3-container">
<select id="numberOfDice">
<option>1</option>
<option>2</option>
<option>3</option>
....
</select>
</div>

<div class="w3-container">
<p>Number of Sides per Dice</p>
<select id="sidesPerDice">
<option>4</option>
<option>6</option>
<option>8</option>
...
</select>
</div>

<div class="w3-container">
<p>Constitution Modifier</p>
<select id="constMod">
<option>0</option>
<option>1</option>
<option>2</option>
...
</select>
</div>

您需要一个JavaScript函数

<button id="form_submit" onclick='doCalc()'>Get Hit Points</button>

Answer 3

您选择的下拉列表的值不必是唯一的，它们可以是您喜欢的任何内容。您已为每个选项分配了一个唯一ID，例如id="numberOfDice"，这很好 - 每个<option>标记都是<select>标记的子标记，我们可以获得使用javascript的那个值。

我删除了您的值中的文字，因此您只需要处理数字 - 例如，value="plus0"应该变为value="0"。

将jquery库包含在脑中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

然后在你的Script.js中添加以下内容

$( document ).ready(function() {

// listen for a click event on your button 
$('#form_submit').click(function(event) { 

// stop the form submitting data - we just want to update your html

event.preventDefault();

// get the values of your selects as variables

var numberOfDice = $('#numberOfDice').val();
var sidesPerDice = $('#sidesPerDice').val();
var constMod = $('#constMod').val();

// do the calculation
var sum = numberOfDice + sidesPerDice + constMod;

// now update your html with your calculation

$('p#getHitPoints').html(sum);

});


});

Answer 4

      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>

说明：首先你的选项值应该是整数和unqiue ..使你的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;
}

链接到小提琴：[https://jsfiddle.net/qfxvydmp/][1]

使用javascript

4 个答案: