вывести строку в зависимости от выбора пользователя html

Question

У меня есть форма, где пользователь вводит количество от 1 до 10, и текстовое поле только для чтения, где мне нужно вывести строку с рассчитанной ценой.Также может быть другим королем контейнера, но, поскольку позиция находится внутри отформатированной ячейки, я бы предпочел не использовать div.Как уже говорилось, все находится внутри формы для публикации значений (также есть капча) в php-файл для процесса покупки.Вот мой код, что касается:

function calculatePrice() {
  var form = document.getElementById('buy_form');
  var num_pieces = parseInt(form.elements.number_select.value);
  var price_for_1 = 9.90; //I know, hardcoded is worst, I'll take it from the DB later on
  var totalprice = price_for_1 * num_pieces;
  document.getElementById("total_price").innerHTML = "Total price: \u20AC " + totalprice;
}

<form method="post" id="buy_form" action="buy.php">

<select name="numberselect" id="number_select" onChange="calculatePrice()">
<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>

<input type=text class="totalprice" id="total_price" style="border: none" readonly>

//a captcha image
//a captcha input field
//a submit button

</form>

Функция просто ничего не выводит в текстовом поле только для чтения.Чего мне не хватает?

Answer 1

На самом деле проблема

 document.getElementById("total_price").innerHTML

innerHTML никогда не будет работать, потому что innerHTML добавит HTML-элемент в элемент, выбранный в javascript

следует использовать,

document.getElementById("total_price").value

Так функция будет выглядеть так

function calculatePrice() { 
  var form = document.getElementById('buy_form');
  var num_pieces = parseInt(form.elements.number_select.value);
  var price_for_1 = 9.90; //I know, hardcoded is worst, I'll take it from the DB later on
  var totalprice = price_for_1 * num_pieces;
  document.getElementById("total_price").value = "Total price: \u20AC " + totalprice;
}

Надеюсь, это поможет

Answer 2

document.getElementById("total_price").innerHTML 

должно быть,

document.getElementById("total_price").value

function calculatePrice() {
        var form = document.getElementById('buy_form');
        var num_pieces = parseInt(form.elements.number_select.value);
        var price_for_1 = 9.90; //I know, hardcoded is worst, I'll take it from the DB later on
        var totalprice = price_for_1 * num_pieces;
        document.getElementById("total_price").value = "Total price: \u20AC " + totalprice;
    }

<form method="post" id="buy_form" action="buy.php">

    <select name="numberselect" id="number_select" onChange="calculatePrice()">
        <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>
    </select>

    <input type=text class="totalprice" id="total_price" style="border: none" readonly>
</form>

Answer 3

Может быть, это маленькая вещь, которую вы упускаете. Если это собственный HTML и JS, событие имеет значение onchange , а не onChange

Попробуйте это!

Answer 4

В вашем коде JavaScript сделайте следующие изменения:

function calculatePrice() {
  var form = document.getElementById('buy_form');
  var num_pieces = parseInt(form.elements.number_select.value);
  var price_for_1 = 9.90; //I know, hardcoded is worst, I'll take it from the DB later on
  var totalprice = price_for_1 * num_pieces;
  document.getElementById("total_price").value = "Total price: \u20AC " + totalprice;
}

window.calculatePrice = calculatePrice;

1. Измените значение innerHTML на значение.
2. Добавьте функцию к объекту окна.