Каждый раз создавать таблицу на javsascript с разными вторичными столбцами?

#javascript

#javascript

Вопрос:

Я новичок в JavaScript, поэтому в этом коде, вероятно, много ошибок. Но то, что я создаю, — это калькулятор собачьей еды, он выводит таблицу вычислений, но, похоже, я не могу объединить ответы во втором столбце. два, три, четыре и т. Д. Являются переменными для расчетов за месяц, которые я хочу распечатать во втором столбце, есть ли способ сделать цикл или что-то в этом роде? Заранее спасибо. Это код:

             function mainPup() {
            var link = "<a href='file:///D:/Desktop/calc/index.html'>Enter another weight</a>"
            var kilos = document.getElementById('input1').value
            var two = kilos * 80
            var three = kilos * 70
            var four = kilos * 60
            var five = kilos * 50
            var six = kilos * 45
            var seven = kilos * 40
            var eight = kilos * 35
            var nine = kilos * 35
            var ten = kilos * 30
            var eleven = kilos * 30
            var twelve = kilos * 12
            var all = two   "<br>"   three   "<br>"   four   "<br>"   five   "<br>"   six   "<br>"   seven   "<br>"   eight   "<br>"   nine   "<br>"   ten   "<br>"   eleven   "<br>"   twelve
            var months = "Months"
            document.getElementById("demo2").innerHTML = kilos   "kg Puppy needs daily:";
            document.getElementById("months").innerHTML = months;
            document.getElementById("demo3").innerHTML = all;
            document.getElementById("demo4").innerHTML = link;
            var kilos = document.getElementById('input1').value
            try {
                var table = Number(kilos);
                if (kilos == 0) {
                    alert("Please Enter Value");
                } else {

                    var output = "<table border='2'><thead><th>Month</th><th>Mince</th>></thead><tbody>";
                    for (var num = 1; num <= 12; num  ) {
                        output  = "</td><td>"   num   "</td><td>"   all   "</td></tr>";
                    }
                    output  = "</tbody></table>";
                    document.getElementById("demo3").innerHTML = output;
                }
            } catch (err) {}
        }
  

Ответ №1:

Хорошо, учитывая ваши требования, основываясь на прикрепленном вами изображении, я думаю, вам нужно:

     function mainPup() {
      // REMOVED for testing only
      //var link = "<a href='file:///D:/Desktop/calc/index.html'>Enter another weight</a>"
      //var kilos = document.getElementById('input1').value
      // ADDED for testing only
      var kilos = 2;
      // Multipliers for each month - note that this is zero-based, so 0 and 1 are not required
      // the first value in the output will be month=2, so that is the third item in this list
      var monthly = [0, 0, 80, 70, 60, 50, 45, 40, 35, 35, 30, 30, 12];
      // var all = two   "<br>"   three   "<br>"   four   "<br>"   five   "<br>"   six   "<br>"   seven   "<br>"   eight   "<br>"   nine   "<br>"   ten   "<br>"   eleven   "<br>"   twelve
      var months = "Months"
      // REMOVED for testing purposes only
      // document.getElementById("demo2").innerHTML = kilos   "kg Puppy needs daily:";
      // document.getElementById("months").innerHTML = months;
      // document.getElementById("demo4").innerHTML = link;
      // Unnecessary as "demo3" will be replaced by a table
      // document.getElementById("demo3").innerHTML = all;
      // Duplicate assignment of kilos, remove this
      // var kilos = document.getElementById('input1').value
      try {
          var table = Number(kilos);
          if (kilos == 0) {
              alert("Please Enter Value");
          } else {

              var output = "<table border='2'><thead><th>Month</th><th>Mince</th></thead><tbody>";
              for (var num = 2; num <= 12; num  ) {
                  output  = "<tr><td>"   num   "</td><td>"   (kilos * monthly[num])   "</td></tr>";
              }
              output  = "</tbody></table>";
              document.getElementById("demo3").innerHTML = output;
          }
      } catch (err) {}
    }

    mainPup()  
 <div id="demo3"></div>  

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

Комментарии:

1. Я отредактировал код и теперь вывожу правильные ответы, но теперь это широкий столбец, подобный этому [ссылка] imgur.com/a/35KcAse есть ли шанс, что я смогу сделать так, чтобы он был вертикальным? Спасибо

2. Извините — я немного обновил код — не могли бы вы проверить еще раз?

3. Вот результат [ссылка] imgur.com/a/vh4ixME . Все они собираются в один столбец, возможно ли иметь 1, затем ответ на 1, 2, затем ответ на 2 и так далее и тому подобное.

4. Они попали в один столбец, потому что именно так вы определили выходные данные — каждая из записей во втором столбце состоит из all значения, которое вы определили как отдельные значения, разделенные <br> тегами. Вы хотите, чтобы значения также содержались в отдельных столбцах? Итак, в каждой строке 12 столбцов — номер месяца и 11 весов?

5. Да, я хочу, чтобы значения для месяцев были в отдельных столбцах, например: 1 = 160, 2 = 40 … и так далее. Спасибо.