0

Does anyone have an idea why my JS function is not working/my price div isn't showing anything at all?

HTML:

<div id="variant">
    <label><input type="radio" name="toggle" id="3"><span>A</span></label>
    <label><input type="radio" name="toggle" id="12" checked="checked"><span>B</span></label>
    <label><input type="radio" name="toggle" id="24"><span>C</span></label>
</div>
<br>
<div id="price"></div>

JS:

function setPrice() {
  if (document.getElementById('3').checked) {
    document.getElementById('price').innerHTML = "19,99€";
  } else if (document.getElementById('12').checked) {
    document.getElementById('price').innerHTML = "<<<";
  } else (document.getElementById('24').checked) {
    document.getElementById('price').innerHTML = "xxx";
  }
}
Fabian Raum
  • 1
  • 1
  • 4
    How are you calling setPrice? And a regular `else` doesn't take an argument. – j08691 May 19 '17 at 20:26
  • At a minimum you'd need `setPrice();` but I'm guessing you want to call this function in the `onChange` or `onClick` event... – War10ck May 19 '17 at 20:28
  • 1
    Starting an id with a number, or only using a number, is considered bad practice. http://stackoverflow.com/q/70579/1026459 has a list of appropriate values for the id. – Travis J May 19 '17 at 20:28
  • Thank you guys very much for the quick answers! 1. Changed the id's (cause of number bad practice) and 2. added "else if". @War10ck yeah, that's exactly what I want to do! (onChange) - how can I insert the function in the easiest way? And is it a problem that the input is inside the label? (if I change it, the click functionality doesn't work anymore :( ) – Fabian Raum May 19 '17 at 20:47
  • https://jsfiddle.net/#&togetherjs=GOwhF2asm4 that's my current non-working prototype – Fabian Raum May 19 '17 at 20:50
  • 2
    Don't you look at the Javascript console for errors before you come here? It would have told you that you had a syntax error. – Barmar May 19 '17 at 20:52
  • Please excuse me, I'm pretty new to JS and don't know how to check my code yet – Fabian Raum May 19 '17 at 21:08

2 Answers2

2

An "else" condition doesn't take in a statement, it would be IF / ELSE IF that takes in statements. Please see updated code snippet!

function setPrice() {
  if (document.getElementById('3').checked) {
    document.getElementById('price').innerHTML = "19,99€";
  } else if (document.getElementById('12').checked) {
    document.getElementById('price').innerHTML = "<<<";
  } else if (document.getElementById('24').checked) {
    document.getElementById('price').innerHTML = "xxx";
  }
}

setPrice();
<div id="variant">
  <label><input type="radio" name="toggle" id="3" onClick="setPrice();"><span>A</span></label>
  <label><input type="radio" name="toggle" id="12" onClick="setPrice();" checked="checked"><span>B</span></label>
  <label><input type="radio" name="toggle" id="24" onClick="setPrice();"><span>C</span></label>
</div>
<br>
<div id="price"></div>
Woodrow
  • 2,740
  • 1
  • 14
  • 18
0

The error comes from two sources.

  1. You aren't calling setPrice()
  2. Your line else (document.getElementById('24').checked). There shouldn't be a condition if there isn't an if
Howzieky
  • 829
  • 7
  • 18