Question

我已经创建了一个计算器，用于为7岁的1型糖尿病患者计算碳水化合物，但随着我在数组中添加更多值，页面变得太长了。

我正在寻找一种方法，从食物名称的单一选择开始，然后选择重量并计算碳水化合物。然后有一个按钮，动态地向表单添加另一行，以便选择新的食物项目并计算任何进一步添加的结果。

这是我的功能代码库：

<html><head>
<meta name = "viewport"  content = "initial-scale = 1.0, user-scalable = no">
<title>Carb Calculator</title>
<style>
    #container{width: 200px; margin: 0 auto;}
    label { font-size:20px; display: inline-block; width: 45%; text-align: right;}
    input[type="text"][disabled] {width: 12%; background-color: white;  color: black; font-weight: bolder;}
    input[type="button"] {}
    select {width: 15%}
</style></head>
<body>
<script language="javascript" type="text/javascript">
var myArray = [['Banana',0.1428571429], ['Blackberry',0.1], ['Blueberry',0.1418918919], ['Carrots',0.09836065574],  ['Cantaloupe',0.08],    ['Cherry Tomato',0.05882352941],    ['Cucumber',0.03653846154],     ['Green apple',0.1373626374],   ['Honeydew',0.09],  ['Pear',0.15],  ['Raspberry',0.12], ['Plum',0.11],  ['Strawberry',0.075],   ['Watermelon',0.075]];
function reset(){
   var t=0;
   for (var i=0; i<myArray.length; i++) {
     var v = "val"+i;
     document.calc.elements[v].value=0;
    }
  }
  function calculate(){
    var t=0;
    var tt=0;
    for (var i=0; i<myArray.length; i++) {
        var v = "val"+i;
        var a = "answer"+i;
        if(isNaN(parseInt(document.calc.elements[v].value))) {
            //document.calc.elements[a].value="";
        } else {
            tt=(parseInt(document.calc.elements[v].value))* myArray[i][1]; 
            document.calc.elements[a].value=tt.toFixed(1);
            t+=tt;
        }
    }    
    document.calc.answerTot.value=(t).toFixed(1)        
}        
document.write("<form name=\"calc\" action=\"post\">");
for (var i=0; i<myArray.length; i++) {
    var vv = "val"+i;
    var aa = "answer"+i;
    document.write("<label>"+myArray[i][0]+":</label> <select name=\""+ vv +"\" onchange=\"calculate()\" >");
    for (var j=0; j<301; j++) {
      document.write("<option value=" +j+ ">" +j+ "</option>");
    }
    document.write("</select><input type=text name=" +aa+ " size=5  placeholder=\"Carbs\" disabled><br>");
}
    document.write("<br><label for=\"answerTot\">Total carbs: </label> <input type=text name=answerTot size=5 disabled></br></br> <div style=\"text-align:center\">  <input type=button value=Calculate onClick=\"calculate()\"></br></br><input type=button value=Reset onClick=\"reset()\"></div>");
    </script></body></html>

Answer 1

您好，欢迎来到StackOverflow！

你的代码需要一些返工和类似的问题（更像是一个任务而不是一个问题）在这里通常不会很成功。

话虽如此，我写了一些希望对你有所帮助的东西，关于它的好处是，如果你想添加新类型的食物，你只需要将它们添加到数组中，js将照顾它

虽然小心接近1位数，但在计算中可能会丢失一些碳水化合物。另外，请检查你的碳水化合物，看看我是否错误地修改了任何东西。

var myArray = [
	['Food', 0],
	['Banana', 0.1428571429],
	['Blackberry', 0.1],
	['Blueberry', 0.1418918919],
	['Carrots', 0.09836065574],
	['Cantaloupe', 0.08],
	['Cherry Tomato', 0.05882352941],
	['Cucumber', 0.03653846154],
	['Green apple', 0.1373626374],
	['Honeydew', 0.09],
	['Pear', 0.15],
	['Raspberry', 0.12],
	['Plum', 0.11],
	['Strawberry', 0.075],
	['Watermelon', 0.075]
];

function reset() {
	var inputs = document.getElementById("calculatorForm").getElementsByTagName("input");
	for (var i = 0; i < inputs.length; i++) {
		inputs[i].value = "";
	}
	document.getElementById("answerTot").value = "";
}

function calculate() {
	var t = 0;
	var tt = 0;
	var inputs = document.getElementById("calculatorForm").getElementsByTagName("input");
	for (var i = 0; i < inputs.length; i++) {
		if (inputs[i].disabled == false) {
			if (parseInt(inputs[i].value) > 0) {
				tt = (parseInt(inputs[i].value) * getValue(inputs[i].previousSibling.value));
				t = +t + +tt;
				inputs[i].nextSibling.value = tt.toFixed(1);
			}
		}
	}
	console.log(t.toFixed(1));
	document.getElementById("answerTot").value = (t).toFixed(1)
}

function add() {
	document.getElementById("calculatorForm");
	var o = document.createElement("option");
	var sel = document.createElement("select");
	var inp = document.createElement("input");
	var close = document.createElement("span");
	var entry = document.createElement("div");
	var carbs = document.createElement("input");
	carbs.disabled = true;
	carbs.className = "result";
	entry.className = "entry";
	close.className = "remove";
	close.innerHTML = "Remove";
	for (i = 0; i < myArray.length; i++) {
		o = document.createElement("option");
		o.value = myArray[i][0];
		o.innerHTML = myArray[i][0];
		sel.appendChild(o);
	}
	close.addEventListener("click", function() {
		this.parentElement.remove();
		calculate();
	})
	entry.appendChild(sel);
	entry.appendChild(inp);
	entry.appendChild(carbs);
	entry.appendChild(close);
	document.getElementById("calculatorForm").appendChild(entry);
}

function getValue(food) {
	for (var i = 0; i < myArray.length; i++) {
		if (myArray[i][0] == food) return myArray[i][1];
	}
}

function getIndex(food) {
	for (var i = 0; i < myArray.length; i++) {
		if (myArray[i][0] == food) return i;
	}
}
window.onload = function() {
	add();
}

* {
	box-sizing: border-box;
}

#container {
	width: 200px;
	margin: 0 auto;
}

input[type="text"][disabled] {
	outline: none;
	border: 1px solid gray;
	background-color: white;
	color: black;
	font-weight: bolder;
}

input[type="button"] {}

select {
	width: 15%
}

#calculatorForm {
	width: 300px;
	margin: auto;
	text-align: center;
}

#calculatorForm .entry > * {
	width: 140px;
	height: 20px;
	margin: 5px;
}

#calculatorForm .entry > span {
	font-size: 11px;
	line-height: 20px;
	cursor: pointer;
}

#calculatorForm .entry > .result {
	width: 240px;
}

.control {
	width: 300px;
	margin: auto;
	text-align: center;
}

.control>label {
	font-size: 11px;
	width: 290px;
	display: block;
	margin: auto;
	text-align: left;
	margin-bottom: -5px;
}

.control>input {
	display: block;
	width: 290px;
	padding: 5px;
	margin: 5px auto;
}

<form name="calc" action="post" id="calculatorForm">
</form>
<div style="text-align:center" class="control">
	<label for="answerTot">Total carbs </label>
	<input type=text id=answerTot size=5 disabled>
	<input type=button value="Add Food" onClick="add()">
	<input type=button value=Calculate onClick="calculate()">
	<input type=button value=Reset onClick="reset()">
</div>

Answer 2

如果有人想看到结果，这就是我最终的结果。我添加了几个事件监听器，并将权重值设为选择而不是输入。再次感谢@Paul的帮助，这正是我想要完成的事情！

<html>
<head>
    <meta name = "viewport"  content = "initial-scale = 1.0, user-scalable = no">
        <title>Carb Calculator</title>
<style>
    {
    box-sizing: border-box;
}

#container {
    width: 200px;
    margin: 0 auto;
}

input[type="text"][disabled] {
    outline: none;
    border: 1px solid gray;
    background-color: white;
    color: black;
    font-weight: bolder;
}

input[type="button"] {}

select {
    width: 15%
}

#calculatorForm {
    width: 300px;
    margin: auto;
    text-align: center;
}

#calculatorForm .entry > * {
    width: 145px;
    height: 20px;
    margin: 2px;
}

#calculatorForm .entry > span {
    font-size: 11px;
    line-height: 20px;
    cursor: pointer;
}

#calculatorForm .entry > .result {
    width: 50px;
}

.control {
    width: 300px;
    margin: auto;
    text-align: center;
}

.control>label {
    font-size: 11px;
    width: 290px;
    display: block;
    margin: auto;
    text-align: left;
    margin-bottom: -5px;
}

.control>input {
    display: block;
    width: 290px;
    padding: 5px;
    margin: 5px auto;
}
</style>
</head>
<body>

<script language="javascript" type="text/javascript">
var myArray = [
    ['Food', 0],
    ['Banana', 0.1428571429],
    ['Blackberry', 0.1],
    ['Blueberry', 0.1418918919],
    ['Carrots', 0.09836065574],
    ['Cantaloupe', 0.08],
    ['Cherry Tomato', 0.05882352941],
    ['Cucumber', 0.03653846154],
    ['Green apple', 0.1373626374],
    ['Honeydew', 0.09],
    ['Pear', 0.15],
    ['Raspberry', 0.12],
    ['Plum', 0.11],
    ['Strawberry', 0.075],
    ['Watermelon', 0.075]
];

function reset() {
    var inputs = document.getElementById("calculatorForm").getElementsByClassName("result");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].value = 0;
    }
    document.getElementById("answerTot").value = "";
}

function calculate() {
    var t = 0;
    var tt = 0;
    var inputs = document.getElementById("calculatorForm").getElementsByClassName("result");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].disabled == false) {
            if (parseInt(inputs[i].value) >= 0) {
                tt = (parseInt(inputs[i].value) * getValue(inputs[i].previousSibling.value));
                t = +t + +tt;
                inputs[i].nextSibling.value = tt.toFixed(1);
            }
        }
    }
    console.log(t.toFixed(1));
    document.getElementById("answerTot").value = (t).toFixed(1)
}

function add() {
    document.getElementById("calculatorForm");
    var o = document.createElement("option");
    var sel = document.createElement("select");
    var inpu = document.createElement("select");
    var close = document.createElement("span");
    var entry = document.createElement("div");
    var carbs = document.createElement("input");
    carbs.disabled = true;
    carbs.className = "result";
    inpu.className = "result";
    entry.className = "entry";
    close.className = "remove";
    close.innerHTML = "Remove";
    for (i = 0; i < myArray.length; i++) {
        o = document.createElement("option");
        o.value = myArray[i][0];
        o.innerHTML = myArray[i][0];
        sel.appendChild(o);
    }
    for (var j=0; j<301; j++){
        inpu.options[inpu.options.length]=new Option(j,j)
    }
    close.addEventListener("click", function() {
        this.parentElement.remove();
        calculate();
    })
    inpu.addEventListener("change", function() {
        calculate();
    })
    sel.addEventListener("change", function() {
        calculate();
    })
    entry.appendChild(sel);
    entry.appendChild(inpu);
    entry.appendChild(carbs);
    entry.appendChild(close);
    document.getElementById("calculatorForm").appendChild(entry);
}

function getValue(food) {
    for (var i = 0; i < myArray.length; i++) {
        if (myArray[i][0] == food) return myArray[i][1];
    }
}

function getIndex(food) {
    for (var i = 0; i < myArray.length; i++) {
        if (myArray[i][0] == food) return i;
    }
}
window.onload = function() {
    add();
}
</script>

<form name="calc" action="post" id="calculatorForm"></form>
  <div style="text-align:center" class="control"><br>
    <label for="answerTot">Total carbs </label>
    <input type=text id=answerTot size=5 disabled>
    <input type=button value="Add Food" onClick="add()">
    <input type=button value=Calculate onClick="calculate()">
    <input type=button value=Reset onClick="reset()">
</div>
</body></html>

Answer 3

这是我提出的一个小应用程序，可以满足您的需求。它由五个应位于同一目录中的文件组成。

为您的孩子提供最佳健康！

功能包括：

添加和删除新的食物类型
在多个列表中添加和删除食物
更改，增加和减少列表中的食品项目数
管理（添加，删除，重命名）多个列表
在本地浏览器中保存和加载数据
通过文本区域导出和导入数据，以便在外部保存数据。
大屏幕和手持设备的布局支持

myCarbCalculator.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Carb Calculator</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="myCarbCalculator.css"></link>
    <link rel="stylesheet" media="screen" href="myCarbCalculator-Screen.css"></link>
    <link rel="stylesheet" media="handheld" href="myCarbCalculator-Handheld.css"></link>
    <script type="text/javascript" src="myCarbCalculator.js"></script>
</head>
<body onload="init();">
    <div id="root">
        <div id="header">
            <button id="btnSaveSettings">save Settings</button>
            <button id="btnLoadSettings">load Settings</button>
            <button id="btnImportSettings">import Settings</button>
            <button id="btnExportSettings">export Settings</button>
            <button id="btnResetSettings">reset Settings</button>
        </div>
        <div id="center">
            <div id="content-main">
                <div id="c_foodSelector">
                    <label for="selFoodSelector">select a type of food</label>
                    <select id="selFoodSelector"></select>
                    <button id="btnAddSelectedFoodToList">Add Food to List</button>
                </div>
                <div id="c_foodTable">
                    <div id="c_foodTableOptions">                       
                        <input id="p_foodTableName" value="Your List of Food Items"/>
                        <button id="btnRenameFoodTable">rename List</button>
                        <button id="btnNewFoodTable">new List</button>
                    </div>
                    <table id="foodTable" class="fill-width"></table>
                </div>
            </div>
            <div id="content-additional">
                <div id="c_results">
                    <label for="inputResultCarbs">Carbs Total</label>
                    <input id="inputResultCarbs" readonly="readonly"/>
                </div/>
                <div id="c_foodTableSelection">
                    <table id="foodTableSelection" class="fill-width"></table>
                </div>
                <div id="c_output">
                    <h3>Import/Export</h3>
                    <textarea id="p_output" class="fill-width"></textarea>
                </div/>
            </div>
        </div>
        <div id="footer">
            <label for="p_newFoodName">Food Name</label><input id="p_newFoodName"/>
            <label for="p_newFoodCarbs">Carb Value</label><input id="p_newFoodCarbs"/>
            <button id="btnNewFood">add a new type of food</button>
            <button id="btnDeleteSelectedFood">delete Selected type of food</button>
        </div>  
    </div>
</body>
</html>

myCarbCalculator.js

var SAVEID = 'carbCalculatorSettings';

function MyCarbCalculator(){
    var self = this;

    this.settings = null;

    this.initSettings = function(){
        self.settings = {
            'activeFoodList' : 'default',
            'foodData' : {},
            'foodList' : {
                'default' : {
                    'label' : 'Your List of Food Items',
                    'list' : {},
                    'dateCreated' : '',
                    'dateChanged' : '',
                    'notes' : 'This is the default Food List'
                }
            }
        };
    };

    this.clearContents = function(element){
        while (element.firstChild) {
            element.removeChild(element.firstChild);
        }
    };

    this.formatDate = function(timestamp){
        if(timestamp != ""){
            var date = new Date(timestamp);
            var monthNames = [
              "January", "February", "March",
              "April", "May", "June", "July",
              "August", "September", "October",
              "November", "December"
            ];
            var day = date.getDate();
            var monthIndex = date.getMonth();
            var year = date.getFullYear();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            return day + ' ' + monthNames[monthIndex] + ' ' + year + ' ' + hours + ':'+ minutes + ':'+ seconds;
        }
        return "---";
    };

    //////////////////////////////////////////////////////////////////
    // Load and Save Data
    //////////////////////////////////////////////////////////////////
    this.resetSettings = function(){
        self.initSettings();
        self.updateView();
    };

    this.saveSettings = function(){
        localStorage.setItem(SAVEID,JSON.stringify(self.settings));
    };

    this.loadSettings = function(){
        var saveData = localStorage.getItem(SAVEID);
        if(saveData != null && saveData.length > 0){
            self.settings = JSON.parse(localStorage.getItem(SAVEID));
            self.updateView();
        }
        else{
            self.initSettings();
        }
    };

    this.importSettings = function(){
        localStorage.setItem(SAVEID,document.getElementById('p_output').value);
        self.loadSettings();
    };

    this.exportSettings = function(){
        document.getElementById('p_output').value = localStorage.getItem(SAVEID);
    };

    //////////////////////////////////////////////////////////////////
    // Manage Food Data
    //////////////////////////////////////////////////////////////////
    this.updateView = function(){
        self.updateFoodSelector();
        self.updateFoodTable();
        self.updateFoodTableSelection();
        self.updateResult();
    };

    //////////////////////////////////////////////////////////////////
    // Manage Food Data
    //////////////////////////////////////////////////////////////////
    this.newFood = function(){
        var name = document.getElementById('p_newFoodName').value;
        var carbs = document.getElementById('p_newFoodCarbs').value;
        var id = Date.now();
        self.settings.foodData[id] = {'name':name,'carbs':carbs};
        self.updateFoodSelector();
    };

    this.removeSelectedFoodData = function(){
        var foodSelector = document.getElementById('selFoodSelector');
        var foodDataId = foodSelector.options[foodSelector.selectedIndex].value;
        delete self.settings.foodData[foodDataId];
        self.updateFoodSelector();
    }

    this.updateFoodSelector = function(){
        var foodSelector = document.getElementById('selFoodSelector');
        self.clearContents(foodSelector);
        for(id in self.settings.foodData){
            var food = self.settings.foodData[id];
            var item = document.createElement("option");
            item.value = id;
            item.innerHTML = food.name + " (" + food.carbs + ")";
            foodSelector.appendChild(item);
        }
    };

    //////////////////////////////////////////////////////////////////
    // Manage current Food Table
    //////////////////////////////////////////////////////////////////
    this.addSelectedFoodToTable = function(){
        var activeFoodListId = self.settings.activeFoodList;
        var foodList = self.settings.foodList[activeFoodListId];

        var foodSelector = document.getElementById('selFoodSelector');
        var selectedFoodId = foodSelector.options[foodSelector.selectedIndex].value;
        var foodData = self.settings.foodData[selectedFoodId];
        var foodItem = {'name':foodData.name,'carbs':foodData.carbs,'count':1};
        foodList.list[Date.now()] = foodItem;
        foodList.dateChanged = Date.now();      

        self.updateView();
    };

    this.updateFoodCount = function(id,value){
        var activeFoodListId = self.settings.activeFoodList;
        var foodList = self.settings.foodList[activeFoodListId];
        foodList.list[id].count = value;
        foodList.dateChanged = Date.now();

        self.updateView();
    };

    this.removeFoodItem = function(id){
        var activeFoodListId = self.settings.activeFoodList;
        var foodList = self.settings.foodList[activeFoodListId];
        delete foodList.list[id];
        foodList.dateChanged = Date.now();
        self.updateView();
    };

    this.updateFoodTable = function(){
        var activeFoodListId = self.settings.activeFoodList;
        var foodList = self.settings.foodList[activeFoodListId];

        // update the List Name
        var foodTableNameElement = document.getElementById('p_foodTableName');
        foodTableNameElement.value = foodList.label;

        // update the List itself
        var foodTable = document.getElementById('foodTable');
        self.clearContents(foodTable);

        // create the Table Header
        var row = document.createElement("tr");
        foodTable.innerHTML = 
        "<tr><th>Name</th><th>Carbs/unit</th><th></th><th>Count</th><th></th></tr>";

        for(id in foodList.list){
            // create a table structure
            var row = document.createElement("tr");
            var elm1 = document.createElement("td");
            var elm2 =  document.createElement("td");
            var elm3 =  document.createElement("td");
            var elm4 =  document.createElement("td");
            var elm5 =  document.createElement("td");
            var elm6 =  document.createElement("td");
            row.appendChild(elm1);
            row.appendChild(elm2);
            row.appendChild(elm3);
            row.appendChild(elm4);
            row.appendChild(elm5);
            row.appendChild(elm6);
            foodTable.appendChild(row);

            // create input fields
            var food = foodList.list[id];

            var inputFoodId = document.createElement("input");
            inputFoodId.id = "food-id-" + id;
            inputFoodId.type = "hidden";
            inputFoodId.value = id;

            var inputFoodName = document.createElement("input");
            inputFoodName.id = "food-name-" + id;
            inputFoodName.setAttribute("readonly","readonly");
            inputFoodName.value = food.name;

            var inputFoodCarbs = document.createElement("input");
            inputFoodCarbs.id = "food-carbs-" + id;
            inputFoodCarbs.setAttribute("readonly","readonly");
            inputFoodCarbs.style.width = "3em";
            inputFoodCarbs.value = food.carbs;

            var inputFoodCount = document.createElement("input");
            inputFoodCount.id = "food-count-" + id;
            inputFoodCount.setAttribute("data-id",id);
            inputFoodCount.style.width = "3em";
            inputFoodCount.value = food.count;
            inputFoodCount.addEventListener("change",function(event){
                var inputFoodCount = event.currentTarget;
                var id = inputFoodCount.getAttribute("data-id");
                var count = inputFoodCount.value;
                self.updateFoodCount(id,count);
            });

            var btnDeleteFoodItem = document.createElement("button");
            btnDeleteFoodItem.innerHTML = "remove";
            btnDeleteFoodItem.setAttribute("data-id",id);
            btnDeleteFoodItem.addEventListener("click",function(event){
                var btnDeleteFoodItem = event.currentTarget;
                var id = btnDeleteFoodItem.getAttribute("data-id");
                self.removeFoodItem(id);
            });

            var btnCountUp = document.createElement("button");
            btnCountUp.innerHTML = "+";
            btnCountUp.setAttribute("data-id",id);
            btnCountUp.addEventListener("click",function(event){
                var id = event.currentTarget.getAttribute("data-id");
                var inputFoodCount = document.getElementById("food-count-"+id);
                inputFoodCount.value = ++ inputFoodCount.value;
                self.updateFoodCount(id,inputFoodCount.value);
            });

            var btnCountDown = document.createElement("button");
            btnCountDown.innerHTML = "-";
            btnCountDown.setAttribute("data-id",id);
            btnCountDown.addEventListener("click",function(event){
                var id = event.currentTarget.getAttribute("data-id");
                var inputFoodCount = document.getElementById("food-count-"+id);
                inputFoodCount.value = -- inputFoodCount.value;
                self.updateFoodCount(id,inputFoodCount.value);
            });

            // append input fields to the table row
            elm1.appendChild(inputFoodId); // this one is invisible anyway
            elm1.appendChild(inputFoodName);
            elm2.appendChild(inputFoodCarbs);
            elm3.appendChild(btnCountDown);
            elm4.appendChild(inputFoodCount);
            elm5.appendChild(btnCountUp);
            elm6.appendChild(btnDeleteFoodItem);
        }
    };

    //////////////////////////////////////////////////////////////////
    // Calculate Results
    //////////////////////////////////////////////////////////////////
    this.calculateCarbsForList = function(listId){
        var foodListData = self.settings.foodList[listId].list;
        var total = 0;
        for(id in foodListData){
            var item = foodListData[id];
            total = total + (item.carbs * item.count);
        }
        return total;       
    };

    this.updateResult = function(){
        var activeFoodListId = self.settings.activeFoodList;
        var foodList = self.settings.foodList[activeFoodListId];
        var inputResultCarbs = document.getElementById("inputResultCarbs");
        inputResultCarbs.value = self.calculateCarbsForList(activeFoodListId);
    };
    //////////////////////////////////////////////////////////////////
    // Food Table Handling
    //////////////////////////////////////////////////////////////////
    this.renameFoodTable = function(){
        var activeTableId = self.settings.activeFoodList;
        var foodList = self.settings.foodList[activeTableId];
        var newName = document.getElementById('p_foodTableName').value;
        foodList.label = newName;
        foodList.dateChanged = Date.now();
        self.updateView();
    };

    this.newFoodTable = function(){
        var newTableName = document.getElementById('p_foodTableName').value;
        var date = Date.now();
        self.settings.foodList[date] = {
                    'label' : newTableName,
                    'list' : {},
                    'dateCreated' : date,
                    'dateChanged' : date,
                    'notes' : ''
                }
        self.settings.activeFoodList = date;
        self.updateView();
    };

    this.updateFoodTableSelection = function(){

        var foodTableSelection = document.getElementById('foodTableSelection');
        self.clearContents(foodTableSelection);
        var foodTableLists = self.settings.foodList;

        foodTableSelection.innerHTML = 
        "<tr><th>Name</th><th>last Change</th><th>Carbs</th><th></th><th></th></tr>";

        for(var tableId in foodTableLists){



            var foodTable = foodTableLists[tableId];

            var row = document.createElement("tr");
            if(tableId == self.settings.activeFoodList){
                row.classList.add("active");                
            }

            var cell1 = document.createElement("td");
            var cell2 = document.createElement("td");
            var cell3 = document.createElement("td");
            var cell4 = document.createElement("td");
            var cell5 = document.createElement("td");

            cell1.innerHTML = foodTable.label;
            cell1.style.cursor = "help";
            cell1.title = foodTable.notes;
            cell2.innerHTML = self.formatDate(foodTable.dateChanged);
            cell2.title = "created: " + self.formatDate(foodTable.dateCreated);
            cell3.innerHTML = self.calculateCarbsForList(tableId);

            var btnSelectFoodTable = document.createElement("button");
            if(tableId == self.settings.activeFoodList)btnSelectFoodTable.disabled = 'disabled';
            btnSelectFoodTable.innerHTML = "select";
            btnSelectFoodTable.setAttribute("data-tableId",tableId);
            btnSelectFoodTable.addEventListener("click",function(event){
                var button = event.currentTarget;
                self.settings.activeFoodList = button.getAttribute("data-tableId");
                self.updateView();
            });
            cell4.appendChild(btnSelectFoodTable);

            var btnDeleteFoodTable = document.createElement("button");
            if(tableId == 'default')btnDeleteFoodTable.disabled = 'disabled';
            btnDeleteFoodTable.innerHTML = "delete";
            btnDeleteFoodTable.setAttribute("data-tableId",tableId);
            btnDeleteFoodTable.addEventListener("click",function(event){
                var button = event.currentTarget;
                var tableId = button.getAttribute("data-tableId");
                if(self.settings.activeFoodList = tableId){
                    self.settings.activeFoodList = "default";
                };
                delete self.settings.foodList[tableId];

                self.updateView();
            });
            cell5.appendChild(btnDeleteFoodTable);

            row.appendChild(cell1);
            row.appendChild(cell2);
            row.appendChild(cell3);
            row.appendChild(cell4);
            row.appendChild(cell5);
            foodTableSelection.appendChild(row);
        }
    };


    //////////////////////////////////////////////////////////////////
    // Add global Events
    //////////////////////////////////////////////////////////////////
    document.getElementById("btnNewFood").addEventListener("click",this.newFood);
    document.getElementById("btnSaveSettings").addEventListener("click",this.saveSettings);
    document.getElementById("btnLoadSettings").addEventListener("click",this.loadSettings);
    document.getElementById("btnResetSettings").addEventListener("click",this.resetSettings);
    document.getElementById("btnImportSettings").addEventListener("click",this.importSettings);
    document.getElementById("btnExportSettings").addEventListener("click",this.exportSettings);
    document.getElementById("btnDeleteSelectedFood").addEventListener("click",this.removeSelectedFoodData);
    document.getElementById("btnAddSelectedFoodToList").addEventListener("click",this.addSelectedFoodToTable);

    document.getElementById("btnRenameFoodTable").addEventListener("click",this.renameFoodTable);
    document.getElementById("btnNewFoodTable").addEventListener("click",this.newFoodTable);

    //////////////////////////////////////////////////////////////////
    // Initialize the Data on screen
    //////////////////////////////////////////////////////////////////
    self.loadSettings();
}

function init(){
    var carCalculator = new MyCarbCalculator();
}

myCarbCalculator.css

body,html{
    height:100%;
}

/* dont show borders on input fields if read only */
input:-moz-read-only {
    border : none;
}
input:read-only {
    border : none;
}

/* spacing elements out */
th{
    text-align:left;
}
label,input,button,select{
    white-space:nowrap;
    margin-right: 1em;
}

button{
    height:2.5em;
}

#c_results,#c_foodSelector,#c_output,#footer,#header{
    padding:1em;
}

/* make result stand out */
#c_results #inputResultCarbs{
    font-size: 2em;
    color: #882222;
    width:4em;
}
#c_results label[for="inputResultCarbs"]{
    font-size: 1em;
    padding-top:1em;
}

.fill-width{
    width:100%;
}

table#foodTableSelection > tr.active{
    background-color:yellow;
}

myCarbCalculator-Screen.css

#root{
    display:flex;
    flex-direction:column;
    height:100%;
}

#header{
    display:flex;
    flex-direction:row;
    border-bottom: 1px solid black;
}

#footer{
    display:flex;
    flex-direction.row;
    border-top: 1px solid black;
}

#center{
    flex: 1 0;
    display:flex;
    flex-direction:row;
}

#content-main{
    flex: 1 0 auto;
    display:flex;
    flex-direction: column;
}

#c_foodSelector{
    border-bottom: 1px solid black;
}

#c_foodTable{

}

#content-additional{
    flex: 0 1 30%;
    display:flex;
    flex-direction: column;
    border-left: 1px solid black;
}

#c_results{
    flex: 1 0 auto;
    border-bottom: 1px solid black;
}

#c_foodTableSelection{
    flex: 1 0 auto;
    border-bottom: 1px solid black;
}

#c_output{
    flex: 0 1 50%;
}

myCarbCalculator-Handheld.css

#root{
    display:flex;
    flex-direction:column;
    height:100%;
}

#header{
    display:flex;
    flex-direction:column;
    border-top: 1px solid black;
    order: 3;
}

#footer{
    display:flex;
    flex-direction:column;
    border-top: 1px solid black;
    order: 2;
}

#center{
    flex: 1 0;
    display:flex;
    flex-direction:column;
    order: 1;
}

#content-main{
    display:flex;
    flex-direction: column;
}

#c_foodSelector{
    display:flex;
    flex-direction:column;
    border-bottom: 1px solid black;
}

#c_foodTable{
    border-bottom: 1px solid black;
}

#content-additional{
    display:flex;
    flex-direction: column;
}

#c_results{
    flex: 1 0 auto;
    border-bottom: 1px solid black;
}

#c_foodTableSelection{
    flex: 1 0 auto;
    border-bottom: 1px solid black;
}

#c_output{
    flex: 0 1 50%;
}

/*******************************************
    ADDITONAL STYLES ONLY FOR HANDHELD LAYOUT
*******************************************/

/* spacing out vertically */
label,input,button,select{
    margin-bottom: 0.5em;
}

input[id^="food-name"]{
    width:4em;
}

#header:before,#footer:before{
    text-align:center;
    font-size:1em;
    font-weight:bold;
    margin-bottom:0.5em;
}

#header:before{
    content:'Options';
}
#footer:before{
    content:'Foodtypes';
}

技术说明：

我使用纯Javascript和CSS。某些样式可能与Edge之前的Internet Explorer等旧版浏览器不兼容。通过浏览器本地存储处理数据保存。导入和导出通过“Javascript Object Notation”（JSON）中的纯文本处理。

应用程序本身被编写为Javascript类，例如名为MyCarbCalculator的函数，它是通过body onload事件和init（）函数创建和初始化的。

通过这个示例应用程序，我试图展示如何以结构化（面向伪对象）的方式使用Javascript以及事件监听器和未命名函数的功能和灵活性，例如使用函数作为参数。

此外，我正在使用CSS媒体描述符来创建灵活的布局，可以为手持设备和大屏幕自定义。这主要是通过“flexbox”风格完成的，它允许非常流畅的布局，并且可以很好地控制元素的定位。

使用javascript或jquery动态添加表单

3 个答案: