How can I make the blue box act as an input when I click it?

JavaScript
1

How can I make the blue box act as an input, getting rid of the little white square and use the blue box as a button/input, and get the same result as if I click one of the input.

CODE; https://codepen.io/anon/pen/oJbdWb

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
  background-color: lightblue;
  display: block;
  width: 350px;
  height: 100px;
}
.flowers {
  width: auto;
  height: 80px;
}


</style>
</head>
<body>




<div id="formular">
  <div id="formulartekst">
    <form>

      <h2 class="formskrift">Dessert</h2>
        <p class="kroner">$20 ALWAYS</p>
        <a href="#">
        <div class="button">
          <img class="flowers" src="http://www.pngpix.com/wp-content/uploads/2016/06/PNGPIX-COM-Bunch-Pink-Rose-Flower-PNG-Image-500x601.png">
          <input name="dessert" value="20" type="checkbox" id="p6" onclick="totalAll()"/>
          Buy beautiful flowers starting at $20!!<br>
        </div>
        </a>
        <input name="dessert" value="20" type="checkbox" id="p7" onclick="totalAll()"/>
        Tuesday<br>
        <input name="dessert" value="20" type="checkbox" id="p8" onclick="totalAll()"/>
        Wednesday<br>
        <input name="dessert" value="20" type="checkbox" id="p9" onclick="totalAll()"/>
        Thursday<br>
        <input name="dessert" value="20" type="checkbox" id="p10" onclick="totalAll()"/>
        Friday<br>
   
      <label>
        <br> Total
        <input value="$0.00" readonly type="text" id="total" />
      </label>
      <input type="submit" value="Order">
    </form>
  </div>
</div>



<script>

// JavaScript Document

window.totalIt= function() {
  var input = document.getElementsByName("dessert");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += 0;
    }
  }
   return total;
}

window.totalAll = function()
{
  document.getElementById("total").value = (totalIt() + totalPrisDessert()).toFixed(2) ;
}

window.totalPrisDessert= function() {
  var input = document.getElementsByName("dessert");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("total").value = "$" + total.toFixed(2);
  return total;
}


</script>

</body>
</html>
2

Think you are looking for this info

1 Like