#javascript #html #css
Вопрос:
Я создал простую программу, которая генерирует случайную сборку для 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)];
}
Ответ №1:
Надеюсь, это поможет вам отвлечься, чтобы вы могли написать следующую часть своей функции. Вот как вы можете получить выбранную в данный момент опцию:
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()
функции.