Как я могу вычислить число в поле ввода со значением из выпадающего меню?

Question

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

Тем не менее, я продолжаю получать «NaN» при запуске. Что я должен изменить?

const number = document.getElementById('number');
const percentageSelector = document.getElementById('percentageSelector');
const submitButton = document.getElementById('submitButton');

//The mathematical stuff
submitButton.addEventListener('click', () => {
    alert(number * percentageSelector);
}); 

<h2>Enter number here</h2>
  <input type="number" id="number">

<h2>Select a percentage to divide by</h2>
  <select id="percentageSelector">
    <option selected disabled>Pick one</option>
    <option>1%</option>
    <option>2%</option>
    <option>3%</option>
    <option>4%</option>
    <option>5%</option>
    <option>6%</option>
    <option>7%</option>
    <option>8%</option>
    <option>9%</option>
    <option>10%</option>
  </select>
  
  <button type="submit" id="submitButton">Submit</button>

Answer 1

Следующий код гарантирует, что значение входов проверяется только при нажатии кнопки. Значения также были добавлены к каждой опции, и значение percentageSelector проверяется с помощью percentageSelector.selectedOptions[0].value.

. Я также сделал jsfiddle .

const percentageSelector = document.getElementById('percentageSelector');
const submitButton = document.getElementById('submitButton');

//The mathematical stuff
submitButton.addEventListener('click', () => {
  const number = document.getElementById('number').value;
  const percentage = percentageSelector.selectedOptions[0].value;

  alert(number * percentage);
});

<h2>Enter number here</h2>
<input type="number" id="number">

<h2>Select a percentage to divide by</h2>
<select id="percentageSelector">
  <option selected disabled>Pick one</option>
  <option value="0.01">1%</option>
  <option value="0.02">2%</option>
  <option value="0.03">3%</option>
  <option value="0.04">4%</option>
  <option value="0.05">5%</option>
  <option value="0.06">6%</option>
  <option value="0.07">7%</option>
  <option value="0.08">8%</option>
  <option value="0.09">9%</option>
  <option value="0.1">10%</option>
</select>

<button type="submit" id="submitButton">Submit</button>

Answer 2

так просто .. позаботьтесь об использовании чисел , а не строковых значений

const numberIn  = document.getElementById('number-in')
  ,   percent   = document.getElementById('percentage-Selector')
  ,   btCompute = document.getElementById('submit-Button')
  ;
btCompute.onclick=()=>
  {
  console.log('percent=', numberIn.valueAsNumber *Number(percent.value) /100)
  }

<h2>Enter number here</h2>
<input type="number" id="number-in">

<h2>Select a percentage to divide by</h2>

<select id="percentage-Selector">
  <option selected disabled>Pick one</option>
  <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>

<button id="submit-Button">Submit</button>

Answer 3

const percentageSelector = document.getElementById('percentageSelector'); устанавливает percentageSelector в элемент , а не значение элемента. (То же самое «число»).

Так как операнды установлены вне функции щелчка, они будут иметь значения, как при загрузке страницы. Вы, вероятно, захотите собрать эту информацию после щелчка, ie внутри функции.

Значением элемента select является выбранный параметр. Значение будет атрибутом value опции. Но ни один из вариантов не имеет value. Как только вы добавите значения (как в случае <option value=".01">, у вас должна получиться «выполнить математику».