Issues running a function off a checkbox onclick

Question

I'm trying to figure out how to make an onclick checkbox function so I thought I would make a small little example. Of course I can't see what i'm doing wrong. Any help would be appreciated.

<!DOCTYPE html>
<html>

<title>Pizza Test</title>
  <script>
      function validatePizza(){
        if(document.getElementById('pepperoni' && 'sausage' && 
        'olives').checked = false)
          message.innerText = "What a terrible pizza";
      } else {
        message.innerText = "Exactly right";
      }
</script>

<h1>Which Pizza Ingredients are the best?</h1>

<h2>Pick which ingredients you like on your pizza</h2>
 <div id="ingredient_box">
  <input  type="checkbox"  id="pepperoni" value="pepperoni" 
  onclick="validatePizza();"/>
  <label for="pepperoni">Pepperoni</label>

  <input  type="checkbox"  id="sausage" value="sausage"/>
  <label for="sausage">Sasuage</label>

  <input  type="checkbox"  id="olives" value="olives"/>
  <label for="olives">olives</label>

  <input  type="checkbox"  id="mushrooms" value="mushrooms"/>
  <label for="mushrooms">mushrooms</label>

  <input  type="checkbox"  id="pineapple" value="pineapple"/>
  <label for="pineapple">pineapple</label>

  <input  type="checkbox"  id="greenPeppers" value="greenPeppers"/>
  <label for="greenPeppers">greenPeppers</label>

1) `'pepperoni' && 'sausage' && 'olives'` evaluates to `'olives'`. If you want to check multiple elements then you have to call `getElementByID` multiple times. 2) `=` is for assignment, not comparison. 3) Don't compare against booleans unless you really have to. | Please explain what issues you are having with your code. *" I can't see what i'm doing wrong"* is not a problem description. — Felix Kling, Apr 21 '17 at 20:47
i would recomend you to use jquery and read this question http://stackoverflow.com/questions/14192522/get-checkbox-values-using-checkbox-name — Daniel Torres Laserna, Apr 21 '17 at 20:49
@Daniel: How is the linked question relevant to what the OP is doing? — Felix Kling, Apr 21 '17 at 20:51
4) Your code has syntax errors. ... I recommend to read http://eloquentjavascript.net/ to learn about JavaScript basics. — Felix Kling, Apr 21 '17 at 20:55
Additionally 'message' is not seen in the markup, so without getting that element you cannot set the text inside it. Please correct that as well! — Pankaj Shukla, Apr 21 '17 at 21:04

Farzin Kanzi · Answer 1 · 2017-04-23T21:10:36.593

0

When you want to compare two objects, do not use =, Instead use == or === . But when you want to compare two boolean, you do not need equal sign. Instead of if(a==false) easily write if(!a)

So change your code to this:

<script>
  function validatePizza(){
       if(!document.getElementById('pepperoni').checked && 
          !document.getElementById('sausage').checked && 
          !document.getElementById('olives').checked){
             message.innerText = "What a terrible pizza";
     } else {
             message.innerText = "Exactly right";
     }
  }
</script>

edited Apr 23 '17 at 21:10

answered Apr 21 '17 at 20:51

Farzin Kanzi

3,380
2
21
23

2

Your answer will be even more useful if you explain the mistakes the OP made and how your changes solves their problem. (also there is still a syntax error in your code, you are missing a `}` and `{`) – Felix Kling Apr 21 '17 at 20:53

Issues running a function off a checkbox onclick

1 Answers1