堆栈内存溢出
  繁体   English   中英

使用下拉菜单和javascript生成结果

[英]generating results using dropdown selections with javascript

 原文  2016-03-16 00:40:21  8   4    javascript/ jquery/ html/ forms/ variables

问题描述

这可能会非常令人费解，但是我会尽力使其尽可能清晰。 我试图找出是否有可能具有简单的html形式。 那有3个下拉菜单，这些下拉菜单对不同的变量具有相似的选项，因此我希望能够在JavaScript函数中使用它来返回总和。 最终，我试图将所有这些都保留在本地，而不必将信息提交给服务器以返回答案，但是如果那是我必须采取的方式，那么我将尝试找出答案。

示例：我有3个下拉菜单。 它们是numberOfDice，sidesPerDice和constMod； 这三个下拉列表均加载有数字（无文本字符串）numberOfDice值= 1-10，sidesPerDice值= 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个8边骰子+ 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更改为我想要的卷数。

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

4 个解决方案

解决方案1
 1  2016-03-16 01:03:38

确实有可能。 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-选定选项的文本值/ 。 这篇文章表明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);
}

我希望本演练将帮助您和其他人从一些东西中指出正确的方向。 但是，您应该真正了解使用JS的jQuery选择html元素的一些基础知识-这实际上确实是这些技术的基本用例！ 在您盲目尝试之前，先熟悉一些基础知识将很有帮助。 在线上有很多资源，包括我链接到的资源（可以通过快速搜索找到；也就是说，知道正确的搜索词会很棘手）。

解决方案2
 0  2016-03-16 01:07:54

首先-从每个option元素中删除value属性，因为这将使从select元素获取值时的事情变得更容易 

<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>

您需要一个JavaScript函数 

function doCalc() {
  //--- get the input values
  var parseInt(numberOfDice = document.getElementById('numberOfDice').value,10);
...
  //-- do you calculations
...
  //--- display your results
  document.getElementById('getHitPoints').innerHTML = myResults;
}

解决方案3
 0  2016-03-16 01:08:14

选择下拉列表的值不必唯一，它们可以是您喜欢的任何值。 您为每个选择提供了唯一的ID，例如id="numberOfDice" ，这很好-每个<option>的<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);

});


});

解决方案4
 0 已采纳  2016-03-16 01:22:29

  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 ]

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 根据多个下拉选项过滤表结果 尝试在javascript函数中传递下拉选择 基于多项选择的Javascript / jquery过滤结果 使用javascript乘以值，结果显示在下拉列表中 保留 $(window).on(&#39;load&#39;, function() 中的 javascript 下拉选择 Javascript 根据 HTML 中的两个下拉选项动态显示 JSON 数据 基于多个下拉菜单选择的Java显示/隐藏div 从JavaScript函数的下拉列表中调用多个用户选择 将下拉列表转换为单选还是仅使用javascript / jquery更改选择？ 在下拉菜单中的不同选项上触发不同的 JavaScript 功能
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM