Question

我正在尝试创建一个菜单，您可以在其中选择多个选项，在最后/或下面的框中，我们希望它显示产品中选择的总kcal值以及文本框，我们不确定如何在下面添加文本框和答案，我们如何解决这个问题？

这是我们目前的代码：

<html>
  <head>
    <title>

    </title>
    <style>
      #overskrift {
        background-color:#ccc;
        color:white;
        padding:10px;
        margin-bottom:10px;

      }

      #verdier 
      {
        width: 300px;
        height: 80px;
        background-color:#FFFFCC;
        box-shadow: 10px 10px 5px #888888;
        color:black;
        padding:20px;
        margin:20px;
      }

      #radioknapper{
        margin-left:150px;
        background-color:#ccc;
      }

      div{
        padding:5px;
      }

      #forbruk{
        font-weight: bold;
      }
      table, th, td, input{
        border:1px solid black;
        margin-left:4px;
        padding:5px;

      }
    </style>
  </head>
  <body>

    <div id="overskrift">
      Beregning av energiforbruket i ulike typer mat
    </div>

    <div id="ramme">
      <div id="tabellramme">
        <table id="tabellen">


          </div>
      </div>
    </div>
    <script>

      // datastruktur array med de ulike verdiene.

      var i=0;
      var j=0;
      var matvareListe = [];
      matvareListe[0]=["Lettmelk", 82, 6.6, 3, 9.6];
      matvareListe[1]=["Egg", 80, 6.9, 5.5, 0.7];
      matvareListe[2]=["Grovbrød", 103, 3.5, 1, 19.6];
      matvareListe[3]=["Smør", 36, 0.025, 4.1, 0.025];
      matvareListe[4]=["Gulost", 53, 4, 4.2, 0];

      var kaloriListe = [];

      var farger = ["red", "orange", "yellow", "lightgreen", "green", "lightblue"];

      // setter opp tabellen med de ulike matvarene:

      function settMatvareTabell(){
        for(i=0; i<5; i++){
          var trTag = document.createElement("TR");
          var atrId = "atr"+i;
          var atId = "at" + i;
          trTag.setAttribute("id", atrId);
          document.getElementById("tabellen").appendChild(trTag);
          for(j=0; j<5;j++){
            var tdTag = document.createElement("TD");
            var t = document.createTextNode(matvareListe[i][j])
            tdTag.appendChild(t);
            document.getElementById(atrId).appendChild(tdTag);	
          }	
          //console.log(atrId);
          var radioInput = document.createElement('input');
          radioInput.setAttribute('type', 'checkbox');
          radioInput.setAttribute('id', atId);

          radioInput.setAttribute('onclick', 'settEnergforbruk()');
          document.getElementById(atrId).appendChild(radioInput);
          //console.log(atId);


        }
      }

      function settEnergforbruk(){
        var sumCal = beregnKiloCalorier();

        alert(sumCal);
        // tegner kakediagram
        var normVerdier = normaliser(kaloriListe);

        tegnKake(cnv.getContext("2d"), normVerdier);   


      }

      function beregnKiloCalorier(){
        var i = 0;
        var sumKiloCal = 0;
        kaloriListe = [];	// Tømmer linten
        for(i=0; i<5; i++){	// Går gjennom liten og legger til hvis radioknappen er på
          var atId = "at" + i;
          if(document.getElementById(atId).checked == true){		// skal taes med
            sumKiloCal = sumKiloCal + matvareListe[i][1];
            kaloriListe.push(matvareListe[i][1]);
          }

        }
        return(kaloriListe);
      }
      // ---------kakediagram verdier --------------



      // ------------------------------------------------
      function normaliser(arr) {

        var sum = arraySum(arr);
        var antall = arr.length;
        var utArray = [];

        for (var teller = 0; teller < antall; teller++) {
          utArray[teller] = arr[teller]/sum;
        }

        return utArray;       
      }

      // ------------------------------------------------
      function arraySum(arr) {

        var antall = arr.length;
        var sum = 0;

        for (var teller = 0; teller < antall; teller++) {
          sum += arr[teller];
        }

        return sum;        
      }

      // ------------------------------------------------
      function tegnKake(c, arr) {

        c.lineWidth = 2;

        c.strokeStyle = "black";

        var vinkel = 0;

        for(var teller = 0; teller < arr.length; teller++) {

          var vinkelstep = arr[teller]*Math.PI*2;

          c.fillStyle = farger[teller % (farger.length)];
          c.beginPath();
          c.moveTo(200, 200);
          c.arc(200, 200, 180, vinkel, vinkel + vinkelstep);
          c.closePath();
          c.fill();
          c.stroke();

          vinkel += vinkelstep;

        }

      }





      settMatvareTabell();

    </script>


  </body>
</html>

Answer 1

首先，如果您希望人们完全理解您的编码内容，请使用英语。如果您使用自己的语言进行评论，则很难理解代码的作用。

反正。因此，如果我理解正确，您想要添加一些kcal值并将其显示在表格下方？为此，您需要一些复选框/单选按钮或输入字段，用户需要填写值或数字。这样，您可以将计算值的总和分配给输入字段。

在你的HTML中复选框：<input class="checkbox" type="checkbox"/>
提取checbox的值：
Javascript：var checkedValue = document.querySelector('.checkbox:checked').value;

在你的HTML中 Radiobutton：
<input name="radiobutton" type="radio" value="1" checked/>
<input name="radiobutton" type="radio" value="0" />

使用Javascript：

var radios = document.getElementsByName('radiobutton');
var radioValue;

for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
        // do whatever you want with the checked radio
        alert(radios[i].value);
        radioValue = radios[i].value;
        // only one radio can be logically checked, don't check the rest
        break;
    }
}

var totalValues = checkedValue + radioValue;

在html中添加一个硬编码的文本框：

在表格下方的HTML中：
<input id="totalCkal" class="inputTotalCkal" type="text" name="totalCkal"/>
使用Javascript： document.getElementById('totalCkal').value = totalValues;

Answer 2

我想你遇到的问题是函数beregnKiloCalorier返回一个包含所有卡路里值的数组，你只需要总和。

要解决此问题，请将您的settEnergforbruk功能更改为：

        function settEnergforbruk(){
            var calList = beregnKiloCalorier();
            console.log(calList);

            var calSum = 0;
            calList.forEach(function(element){
                calSum += element;
            });

            //result is the id if a <input type="text"> where you want the result to be shown
            document.getElementById("result").value = calSum + " KiloCalorier";

            // tegner kakediagram
            var normVerdier = normaliser(kaloriListe);

            tegnKake(cnv.getContext("2d"), normVerdier);   
        }

此外，您应该稍微清理beregnKiloCalorier功能，如下所示：

        function beregnKiloCalorier(){
            var i = 0;
            kaloriListe = [];   // Tømmer linten
            for(i=0; i<5; i++){ // Går gjennom liten og legger til hvis radioknappen er på
                if(document.getElementById("at" + i).checked == true){      // skal taes med
                    kaloriListe.push(matvareListe[i][1]);
                }

            }
            return(kaloriListe);
        }

作为最后的触摸，您应该清理您的html代码，以便脚本标记位于头部而不是正文中。但是这会弄乱功能，但要解决这个问题，请将onload="settMatvareTabell();添加到您身体的开始标记中。

完成后，身体应该看起来像这样：

<body onload="settMatvareTabell();">

    <div id="overskrift">
        Beregning av energiforbruket i ulike typer mat
    </div>

    <div id="ramme">
        <div id="tabellramme">
            <table id="tabellen"></table>
        </div>
    </div>

    <!-- The result will be displayed here -->
    <input type="text" id="result"></input>
</body>

<强>更新

根据此处的要求，您有一个如何在饼图中显示数据的示例：Example

它有点被黑了，但它应该让你知道如何做到这一点：）

具有多个选项和响应的数组

2 个答案: