Making .value value 0 instead of null in javascript

user_9002518 0
Viewed 114

I have following code:

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

    drikke == 0;

}

How do I make the .value return 0 instead of null, which is ruining my program?

javascript
3 Answers

You have to first get the element with:

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

Then check if it is checked get its numeric value with the use of Unary plus (+) and if not, make it 0 with the use of logical operators Logical AND (&&) and Logical OR (||).

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

Code example:

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>

user_19325520
user_10591010

You could write your code following way:

var drikkeElm = document.querySelector('input[name="drikke"]:checked');
var drikke = -1;
if(drikkeElm === null){
    drikke = 0;
}else{
    drikke = parseInt(drikkeElm.value);
}

alert(drikke);
user_52995460
Related