Блог

Я создал простую программу, которая генерирует случайную сборку для MyPLAYER NBA 2k21 для одного из моих классов. Каждая кнопка, на которую нажимает пользователь, генерирует случайное значение для каждого признака.

Сейчас я пытаюсь изменить программу, чтобы запомнить пользовательский ввод для переключателей высоты, а затем сгенерировать случайную позицию на основе выбора этого пользователя. Я хочу, чтобы программа произвольно распределяла:

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)];
}
 

Надеюсь, это поможет вам отвлечься, чтобы вы могли написать следующую часть своей функции. Вот как вы можете получить выбранную в данный момент опцию:

 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() функции.