javascript - How should I implement if varA not selected display not selected? -

i have simple product page few sizes , add cart button. want use jquery $("").toggle(); message saying "choose size" if size isn't selected onclick of add cart button.

here code:

ryan.js

function ryanclicked(id, b, c){   b = b || null;   c = c || null; document.getelementbyid(id).style.bordercolor = "black"; document.getelementbyid(b).style.bordercolor = "#e0e0e0"; document.getelementbyid(c).style.bordercolor = "#e0e0e0"; } 

html.html

<div class="pp"> <div id ="sizebutton1"class="sizebutton" onclick="ryanclicked('sizebutton1','sizebutton2','sizebutton3')">      s </div> <div id ="sizebutton2"class="sizebutton" onclick="ryanclicked('sizebutton2','sizebutton1','sizebutton3')">      m </div> <div id ="sizebutton3"class="sizebutton" onclick="ryanclicked('sizebutton3','sizebutton1','sizebutton2')">      l </div> </div>          <br> //i want prevent onclick happening if size not selected <p class="ryanaddbutton" onclick="simplecart.add('quantity=1','name=black gold','price=58','image=images/thumbs/blackgold.jpg');return false;" >add cart</p>  <p class ="hiddentilclicked"> must select size! </p> 

i want onclick called when size selected , want jquery toggle called if size not selected.

how can this? can use js if statement don't know how use js display html.

edit: can pass in function called in js? callback? simplecart.add() have different parameters each item

1. you need set style , width on border.
2. use variable track if style selected or not.
3. b = b || null isnt needed because pass in parameter

var sizeselected = false;    function ryanclicked(id, b, c) {    sizeselected = true;    document.getelementbyid(id).style.border = "1px solid black";    document.getelementbyid(b).style.border = "1px solid #e0e0e0";    document.getelementbyid(c).style.border = "1px solid #e0e0e0";  }    function addclicked() {    if (sizeselected) {      document.getelementbyid('hiddentilclicked').style.display = 'none';      simplecart.add('quantity=1', 'name=black gold', 'price=58', 'image=images/thumbs/blackgold.jpg');      } else {      document.getelementbyid('hiddentilclicked').style.display = 'block';    }  }

.hiddentilclicked {    display: none;  }

<div class="pp">    <div id="sizebutton1" class="sizebutton" onclick="ryanclicked('sizebutton1','sizebutton2','sizebutton3')">s</div>    <div id="sizebutton2" class="sizebutton" onclick="ryanclicked('sizebutton2','sizebutton1','sizebutton3')">m</div>    <div id="sizebutton3" class="sizebutton" onclick="ryanclicked('sizebutton3','sizebutton1','sizebutton2')">l</div>  </div>  <br>  <p class="ryanaddbutton" onclick="addclicked();">add cart</p>    <p id="hiddentilclicked" class="hiddentilclicked">you must select size!</p>