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>

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

1 个答案: