抓取输入值并选择要放入数组中的值，然后显示为列表

Question

我正在尝试获取花费了多少的输入值，选择选项中的一个值来解释它的花费，并将其列在底部。我的想法是每次提交输入时将值放在一个数组中并将其显示在底部（我在一个按钮中有多个功能）例如：

今天你度过了：
15 杂货
22 外出
7 其他：买一双袜子。

我尝试了几种不同的方法： 我想确认一下，以防用户想添加其他花钱方式。我试过用 .innerHTML 和 .value 进行调整

function listSpending(){
  var repeat, spending= []; 
  while (repeat == true){spending.push(getElementById("money_spent").innerHTML,getElementById("whatOn").innerHTML )
    repeat = confirm("Did you spend money on anything else?");
    listTotalSpent.innerHTML= listOfSpending;`;
  }
}

这不起作用，所以我尝试尝试 getElementByName。从我读到的内容来看，这应该会自动获取具有相同名称的 HTML 并将其放入一个数组中。这也没有显示。

function listSpending(){
  listOfSpending= document.getElementByName("moneySpent").value;
  listTotalSpent.innerHTML= listOfSpending;
}

HTML 和 JS：

 


   function storeCurrent(){
 currentCash= document.getElementById("current").value;
  // check if the entered value is number
  if (isNaN(Number(currentCash))) {
    alert("Numbers only");

  } else {
  currentTotal.innerHTML = `Current total is:${currentCash}`;
  }
   }

function checkOnWhat(val) {
  var element = document.getElementById('whatOn');
  if (val == 'Other')
    element.style.display = 'block';
  else
    element.style.display = 'none';
}


function deductFromTotal() {
  var spent = document.getElementById("money_spent").value;
  // check if the entered value is number
  if (isNaN(Number(spent))) {
    alert("Numbers only");

  } else {

    //currentCash = currentCash - spent;
    currentCash -= spent;
    currentTotal.innerHTML = `Current total is:${currentCash}`;
  }
}


/*function listSpending(){
  listOfSpending= document.getElementByName("moneySpent").value;
  listTotalSpent.innerHTML= listOfSpending;
}*/


/*function listSpending(){
    var repeat, spending= []; 
    while (repeat == true){spending.push(getElementById("money_spent").innerHTML,getElementById("whatOn").innerHTML )
      repeat = confirm("Did you spend money on anything else?");
  
      listTotalSpent.innerHTML= listOfSpending;`;
    }
    }*/
   <input type="amount" size=25 Placeholder="How much is in your wallet?" 
 id="current">
  <input type="button" value ="confirm" onClick="storeCurrent()">
         <br>
       <h2 id="currentTotal">Current total is:
        </h2>

    <input type="amount" size=25 Placeholder="How much did you spend today?" 
id="money_spent" name="moneySpent" required>
     <select name="moneySpent" onchange='checkOnWhat(this.value);' required>
           <option> Groceries
           <option>Going out
            <option>Bills
            <option>Other</select>
    <input type="text" name="whatOn" id="whatOn" style='display:none;' 
required />
    <p>
      <input type="button" value="confirm" onClick="deductFromTotal()" ; 
"listSpending()">

      <h3 name="totalSpent" id="totalSpent"> Today's Total Spending: </h3>
      <div id="listTotalSpent"></div>

Answer 1

看看这个

我必须将名称更改为 ID 并设置一个对象

var currentCash, items = {}
window.addEventListener("load", function() {
  currentCash = document.getElementById("current").value || 0;
  document.getElementById('whatOn').addEventListener("blur",function() {
    var sel = document.getElementById("moneySpent");
    var opt = new Option(this.value,this.value)
    sel.insertBefore(opt,sel.options[sel.options.length-1])
    sel.value=this.value;
    this.style.display="none"
    listSpending()
  })
});

function storeCurrent() {
  currentCash = document.getElementById("current").value;
  // check if the entered value is number
  if (isNaN(Number(currentCash))) {
    alert("Numbers only");
  } else {
    currentTotal.innerHTML = `Current total is:${currentCash}`;
  }
}

function checkOnWhat(val) {
  var element = document.getElementById('whatOn');
  element.style.display = val == 'Other' ? 'block':'none';
}


function deductFromTotal() {
  var spent = document.getElementById("spent").value;
  // check if the entered value is number
  if (isNaN(Number(spent))) {
    alert("Numbers only");
  } else {
    //currentCash = currentCash - spent;
    currentCash -= spent;
    currentTotal.innerHTML = `Current total is:${currentCash}`;
  }
  listSpending()
}

function listSpending() {
  var item = document.getElementById("moneySpent").value
  var spent = document.getElementById("spent").value;  
  if (items[item]) items[item]+= +spent;
  else items[item]= +spent;
  var list = document.getElementById("listTotalSpent");
  list.innerHTML ="";
  var total = 0;
  for (var item in items) {
    list.innerHTML += "<br/>"+item+":"+items[item];
    total += +items[item];
  }   
  document.getElementById("totalSpent").textContent = "Total $"+total.toFixed(2);
}

<input type="amount" size=25 Placeholder="How much is in your wallet?" id="current">
<input type="button" value="confirm" onClick="storeCurrent()">
<br>
<h2 id="currentTotal">Current total is:
</h2>

<input type="amount" size=25 Placeholder="How much did you spend today?" id="spent" required>
<select id="moneySpent" onchange='checkOnWhat(this.value);' required>
  <option> Groceries</option>
  <option>Going out</option>
  <option>Bills</option>
  <option>Other</option>
</select>
<input type="text" name="whatOn" id="whatOn" style='display:none;' required />
<p>
  <input type="button" value="confirm" onClick="deductFromTotal()">

  <h3> Today's Total Spending: </h3>
  <div id="listTotalSpent"></div>
  <div id="totalSpent"></div>