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

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

javascript html arrays

Javascript 具有多个选项和响应的数组,javascript,html,arrays,Javascript,Html,Arrays,我正在尝试创建一个菜单，您可以在其中选择多个选项，在末尾/或下面的一个框中，我们希望它显示产品中所选kcal总量的值以及一个文本框，我们不确定如何在下面添加一个文本框以及答案，我们如何解决这个问题这是我们当前的代码： #过度夸耀{ 背景色：#ccc；颜色：白色；填充：10px；边缘底部：10px； } #青翠的 { 宽度：300px；高度：80px；背景色：#FFFFCC；盒影：10px 10px 5px#8888888；颜色：黑色；填充：20px；利润率：20px； }

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

这是我们当前的代码：


#过度夸耀{
背景色：#ccc；
颜色：白色；
填充：10px；
边缘底部：10px；
}
#青翠的
{
宽度：300px；
高度：80px；
背景色：#FFFFCC；
盒影：10px 10px 5px#8888888；
颜色：黑色；
填充：20px；
利润率：20px；
}
#无线电接收器{
左边距：150像素；
背景色：#ccc；
}
div{
填充物：5px；
}
#福布鲁克{
字体大小：粗体；
}
表，th，td，输入{
边框：1px纯黑；
左边距：4倍；
填充物：5px；
}
勃鲁克特i ulike打字机垫的设计
//datastruktur阵列med de ulike verdiene。
var i=0；
var j=0；
var matvareListe=[]；
matvareListe[0]=[“Lettmelk”，82,6.6,3,9.6]；
matvareListe[1]=“蛋”，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 Kalorilist=[]；
var farger=[“红色”、“橙色”、“黄色”、“浅绿色”、“绿色”、“浅蓝色”]；
//塞特·奥普·塔贝伦·德乌利克·马特瓦伦医学院（setter opp tabellen med de ulike matvarene）：
函数settMatvareTabell（）{
对于（i=0；i首先，如果您想让人们完全理解您的代码，请使用英语。如果您使用自己的语言进行注释，则很难理解您的代码的功能
无论如何。
因此，如果我理解正确，您希望将一些kcal值相加并显示在您的表下？为此，您需要一些复选框/单选按钮或输入字段，用户需要在其中填写值或数字。这样，您可以将计算值的总和分配给输入字段
在您的HTML中

复选框：


要提取checbox的值：

Javascript:var checkedValue=document.querySelector（'.checkbox:checked'）.value；

在您的HTML中

单选按钮：





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;

var radios=document.getElementsByName（'radiobutton'）；
辐射值；
对于（变量i=0，长度=radios.length；i

要在html中添加硬编码的文本框，请执行以下操作：
在表格下方的HTML中：



Javascript:
document.getElementById（'totalCkal'）。value=totalValues；
我猜您遇到的问题是函数beregnkillarier返回一个包含所有选定卡路里值的数组，您只需要求和
要修复此问题，请将settergforbruk函数更改为以下内容：
        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);   
        }

        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);
        }

更新：
根据这里的要求，您有一个关于如何在饼图中显示数据的示例：
它有点被黑客攻击了，但它应该给你一个如何做的想法：）你的标签上写着jquery，但你没有在代码中使用它。你是想使用那个标签吗？对不起，但这似乎无法修复它，我想让它像现在一样工作，而不是“提醒”选择了什么，我想把它和选择的kcals总量一起发布到下面。即使有多个“产品”已选中。谢谢，您知道如何在饼图中显示结果%？例如，300 kcal将占80%，而脂肪/蛋白质将占剩余的20%，这取决于pi图表显示数据所需的数据。如果它根据输入的值的总和自动缩放，则只需计算每个值的总和要显示所显示的n%的名称，必须重新执行BeregnKilocarier函数以返回一个2d数组，第一个字段是名称，第二个字段是所有选定值的总和。我看到了，我想到的是一个pi图，根据选择的内容进行缩放和调整d和显示不同的值。Kcal的总量将是一个标签，蛋白质在另一个标签中，脂肪在一个标签中，碳水化合物在一个标签中。你能帮我吗？非常好。对于饼图，你应该看看一个现成的解决方案，比如切换标签。你可以使用div，在未选中时更改为显示：无（以防您无法找到现成的解决方案来支持此功能）。并显示您要添加的值，如“键值对”从食物名称和价值到图表。价值取决于所选选项卡，如Kcal或蛋白质。我需要一个非常适合它的选项卡：我如何将其嵌入到我的代码中工作？抱歉，如果要求太多
<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>