javascript - 在javascript中使.value值为0而不是null

Question

我有以下代码：

var drikke = 
parseInt(document.querySelector('input[name="drikke"]:checked').value);
if (typeof drikke == null) {

    drikke == 0;

}

如何.value返回0而不是null破坏我的程序？

标签： javascript

Answer 1

您必须首先获取元素：

var drikke = document.querySelector('input[name="drikke"]');

然后检查它是否使用一元加号 (+)checked获取其数值，如果不是，则使用逻辑运算符Logical AND (&&)和Logical OR (||)将其设为 0 。

drikke = drikke.checked && +drikke.value || 0;

代码示例：

function regnut() {
  var drikke = document.querySelector('input[name="drikke"]');
  var mat = document.querySelector('input[name="mat"]');  
  var tilbehør = document.querySelector('input[name="tilbehør"]');  
  var dip = document.querySelector('input[name="dip"]'); 

  drikke = drikke.checked && +drikke.value || 0;
  mat = mat.checked && +mat.value || 0;
  tilbehør = tilbehør.checked && +tilbehør.value || 0;
  dip = dip.checked && +dip.value || 0;

  totalpris = drikke + mat + tilbehør + dip;
  document.querySelector('#output').value = drikke + mat + tilbehør + dip;
  console.log(drikke + mat + tilbehør + dip);
}

@import url('https://rsms.me/inter/inter-ui.css');
html {
  height: 100%;
}

body {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  font-family: 'Inter UI', sans-serif;
}

#drikke,
#mat,
#tilbehør,
#dip {
  float: left;
}

#resultat {
  display: inline;
}

input {
  margin: 4px;
}

#fresh {
  font-family: 'Inter UI', sans-serif;
  float: right;
}

<h1>
  Velkommen til Mc-bergbys</h1><br>
<h3>Velkommen til menyvelgeren</h3><br>
<h4>Sett sammen din meny under</h4><br>
<input type="text" id="input" placeholder="Navn??"><br>
<div id="drikke">
  <input type="radio" name="drikke" value="25" id="cola">Cola<br>
  <input type="radio" name="drikke" value="25" id="solo">Solo<br>
  <input type="radio" name="drikke" value="25" id="sitron">Sitronbrus<br>
  <input type="radio" name="drikke" value="0" id="vann">Vann<br>
</div>
<div id="mat">
  <input type="radio" name="mat" value="30" id="hamburger">Hamburger<br>
  <input type="radio" name="mat" value="40" id="kylling">Kylling<br>
  <input type="radio" name="mat" value="40" id="cheeseburger">Cheeseburger<br>
  <input type="radio" name="mat" value="30" id="nuggets">Nuggets<br>
</div>
<div id="tilbehør">
  <input type="radio" name="tilbehør" value="15" id="pommes">Pommes Frites<br>
  <input type="radio" name="tilbehør" value="20" id="løkringer">Løkringer<br>
  <input type="radio" name="tilbehør" value="20" id="cheesesticks">Cheesesticks<br>
  <br>
</div>
<div id="dip">
  <input type="checkbox" name="dip" value="5" id="ketchup">Ketchup<br>
  <input type="checkbox" name="dip" value="5" id="sennep">Sennep<br>
  <input type="checkbox" name="dip" value="5" id="grillkrydder">Grillkrydder<br>
  <input type="checkbox" name="dip" value="5" id="dip">Dip<br>
</div>
<div id="resultat">
  <br><br>
  <button id="sendinn" onclick="regnut()">Regn ut</button>
  <input type="text" placeholder="totalpris" readonly="true" id="output">
</div>