Присвоение выбора списка данных массиву для выполнения функции - PullRequest
Новая
       2

Присвоение выбора списка данных массиву для выполнения функции

0 голосов
/ 05 мая 2018

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

    <label>How much was your meal? &ensp; $
        <input type="text" id="cost">
    </label>
    <p>
    <label>How good was the service? &ensp;
        <input list="rating" placeholder="Choose a rating">
            <datalist id="rating">
                <option value="1">&#9733;</option>
                <option value="2">&#9733; &#9733;</option>
                <option value="3">&#9733; &#9733; &#9733;</option>
                <option value="4">&#9733; &#9733; &#9733; &#9733;</option>
                <option value="5">&#9733; &#9733; &#9733; &#9733; &#9733;</option>
            </datalist>

    </label>
    </p>
        <input type="button" onclick="pay(percentages);" value="Calculate Tip">

        <script> 
            var percentages = [0, 8, 10, 15, 20, 25];
            var cost;
            var tip;
            var i;


            (function () {
                cost = document.getElementById("cost");
                tip = document.getElementById("rating").getElementsByClassName("option");
                i = parseInt(tip);

                function pay(percentages){

                    percentages.push(percentages[i] / cost * 100);

                }

                var payout = 0;

                document.getElementById("payout").innerHTML = "<br>" + "Pay  $" + payout;

                return payout;

            });        



        </script>

    <div id="payout"></div>

Ответы [ 3 ]

0 голосов
/ 06 мая 2018 

function pay() {
  var x;
  var i;
  const cost = document.getElementById("cost").value;
  console.log('cost',cost)
  const tip = document.getElementById("rating");
  const percentages = [0, 8, 10, 15, 20, 25];
  for (var item = 0; item < tip.options.length; item++) {
    i = parseInt(tip.options[item].value);
  }
  x=percentages.push(i * cost * 100);
  document.getElementById("pay").innerHTML = "Pay  $" + x;
} 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<label>How much was your meal? &ensp; $
  <input type="text" id="cost">
</label>
<p>
  <label>How good was the service? &ensp;
    <input list="rating" placeholder="Choose a rating">
    <datalist id="rating">
      <option value="1">&#9733;</option>
      <option value="2">&#9733; &#9733;</option>
      <option value="3">&#9733; &#9733; &#9733;</option>
      <option value="4">&#9733; &#9733; &#9733; &#9733;</option>
      <option value="5">&#9733; &#9733; &#9733; &#9733; &#9733;</option>
    </datalist>
  </label>
  <p>
    <input type="button" onclick="pay();" value="Calculate Tip">
<div id="pay"></div>
  <script src="./index.js"></script>
</body>
</html>

Прежде всего, вы не получаете входное значение от пользователя. и варианты это массив попробуйте это:

0 голосов
/ 06 мая 2018

Переменная tip является элементом HTML. Вы пытаетесь разобрать его, который вернет NaN. процент [я] даст вам undefined

0 голосов
/ 05 мая 2018

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

<label>How much was your meal? &ensp; $
        <input type="text" id="cost">
</label>
<p>
<label>How good was the service? &ensp;
        <input list="rating" placeholder="Choose a rating">
            <datalist id="rating">
                <option value="1">&#9733;</option>
                <option value="2">&#9733; &#9733;</option>
                <option value="3">&#9733; &#9733; &#9733;</option>
                <option value="4">&#9733; &#9733; &#9733; &#9733;</option>
                <option value="5">&#9733; &#9733; &#9733; &#9733; &#9733;</option>
            </datalist>

</label>
</p>
        <input type="button" onclick="pay(percentages);" value="Calculate Tip">
    <div id="pay"></div>

        <script> 
           var percentages = [0, 8, 10, 15, 20, 25];
           var cost;
           var tip;
           var i;

           (function() {
            cost = document.getElementById("cost");
            tip = document.getElementById("rating").getElementsByTagName('option');
            i = parseInt(tip);

            document.getElementById("pay").innerHTML = "Pay  $" + pay;
            //I'm getting an error here ^^^ and nothing is being output.
            //Uncaught TypeError: Cannot set property 'innerHTML' of null

}

            function pay(percentages){
                percentages.push(percentages[i] * cost * 100);

            } 

        </script>

Закрыл ваш тег <p>, который не был закрыт. Поместите свой сценарий в конец страницы, чтобы он был более чистым, и поместите свой код в самозапускающуюся функцию, чтобы он ожидал готовности документа перед выполнением. Ваш pay, кажется, не установлен, хотя ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...