时间戳

首页 > 解决方案 > JS将单选按钮变成算法参数

javascript - JS将单选按钮变成算法参数

问题描述

我制作了一个简单的程序，为我的一个课程生成一个随机构建的 NBA 2k21 MyPlayer。用户单击的每个按钮都会为每个特征生成一个随机值。

我现在正在尝试更改程序以记住用户输入的高度单选按钮，然后根据该用户的选择生成一个随机位置。我希望程序在以下之间随机化：

PG/SG，如果身高在 6'2" 和 6'5" 之间，或者 SG/SF，如果身高在 6'5" 和 6'8" 之间，或者 SF/PF，如果身高在 6'8" 和 6" 之间'10" 或 PF/C 如果高度在 6'10 和 6'11" 之间

最初该程序只有 3 个从数组中生成随机值的按钮，但现在它由 3 个按钮和一个用户选择的单选按钮组成。这是我被卡住之前的情况：

<h1>
 2k Archetype Generator
</h1>
<p>
  Choose Height
</p>
<form>

<input name="height" type="radio" id="h1"> 6'2"
<br>
<input name="height" type="radio" id="h2"> 6'3"
<br>
<input name="height" type="radio" id="h3"> 6'4"
<br>
<input name="height" type="radio" id="h4"> 6'5"
<br>
<input name="height" type="radio" id="h5"> 6'6"
<br>
<input name="height" type="radio" id="h6"> 6'7"
<br>
<input name="height" type="radio" id="h7"> 6'8"
<br>
<input name="height" type="radio" id="h8"> 6'9"
<br>
<input name="height" type="radio" id="h9"> 6'10"
<br>
<input name="height" type="radio" id="h10"> 6'11"
<br>

</form>
<br>
<button id="positionchoice" onclick="randpos()">
 Position
</button>
<p id="pos">

</p>      
<button id="primary" onclick="randprim()">
  Primary
</button>
<p id="no1">

</p>
        
<button id="secondary" onclick="randsecond()">
  Secondary
</button>
<p id="no2">

</p>

var p = document.getElementById("pos");
var skill1 = document.getElementById("no1");
var skill2 = document.getElementById("no2");
var height = ["6'2","6'3","6'4","6'5","6'6","6'7"
              ,"6'8","6'9","6'10","6'11"];
 var primary = ["Shot Creating", "Playmaking", "Defensive"
                ,"Sharpshooting","3-Point","Rebounding"];
        
var secondary = ["Slasher", "Finisher", "Shooter",
                 "Ball Handler","Lockdown", "Two-Way"];
        
var arr = ["PG", "SG", "SF", "PF", "C"];
                            
function randpos() {

}
        
function randprim() {
 skill1.innerHTML = primary[Math.floor(Math.random()*primary.length)];
}
        
function randsecond() {
 skill2.innerHTML = secondary[Math.floor(Math.random() * secondary.length)];
}

标签： javascripthtmlcss

解决方案

希望这将帮助您摆脱困境，以便您可以编写函数的下一部分。以下是获取当前选定选项的方法：

function randpos() {
  let height = document.querySelector("input[name='height']:checked").value;
  height = parseInt(height);
}
<h1>
  2k Archetype Generator
</h1>
<p>
  Choose Height
</p>
<form>

  <input name="height" type="radio" id="h1" value="74"> 6'2"
  <br>
  <input name="height" type="radio" id="h2" value="75"> 6'3"
  <br>
  <input name="height" type="radio" id="h3" value="76"> 6'4"
  <br>
  <input name="height" type="radio" id="h4" value="77"> 6'5"
  <br>
  <input name="height" type="radio" id="h5" value="78"> 6'6"
  <br>
  <input name="height" type="radio" id="h6" value="79"> 6'7"
  <br>
  <input name="height" type="radio" id="h7" value="80"> 6'8"
  <br>
  <input name="height" type="radio" id="h8" value="81"> 6'9"
  <br>
  <input name="height" type="radio" id="h9" value="82"> 6'10"
  <br>
  <input name="height" type="radio" id="h10" value="83"> 6'11"
  <br>

</form>
<br>
<button id="positionchoice" onclick="randpos()">
 Position
</button>

我已经编辑了您的<input/>元素以包含一个value属性，以便您可以直接从 JS 中选择它。此外，您可能会注意到这些值仅以英寸为单位。您可以使这些值以英尺和英寸为单位，就像仍然显示给用户一样，但是如果您有一个可以与之比较的数字，则可能会使您的生活更轻松地实现函数的下一部分。

在 JavaScript 中，由于您的按钮未附加到您要设置查询选择器的表单，以查找任何<input/>设置name为height. 为了只获取当前选择的元素，我们然后寻找:checked伪类选择器。最后我们得到返回的元素的值并将其分配给一个height变量。（或者，如果您为表单命名，您可以将按钮附加到表单上，这样您就可以以更典型的方式处理它）

由于您可能希望与此值进行比较，因此您可以获取height变量、字符串，并使用该parseInt()函数将其转换为数字。

推荐阅读