Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>For your first problem: In order to display text for a checkbox, you should put checkbox inside label. Here is modified code for you</p> <pre><code>function addElement() { var e= document.getElementById('top-addon'); var tops = e.options[e.selectedIndex].text; var tops_value=e.options[e.selectedIndex].value; // alert(tops_value); var ni = document.getElementById('myDiv'); num += 1; //var newdiv = document.createElement('div'); var countedName = num; // newdiv.setAttribute('id',Name); var x = document.createElement("input"); x.type = "checkbox"; x.name = "toppings[]"; x.setAttribute('id',countedName); x.checked = true; x.value = tops_value; //x.innerHTML=tops; We don't need to set text to checkbox. /* These lines are added */ var label = document.createElement("label"); label.appendChild(x); var span = document.createElement("span"); span.innerText = tops; label.appendChild(span); /* End of added lines */ // Beware that we are adding label to div, instead of checkbox. ni.appendChild(label); } </code></pre> <p>For your second problem: To calculate grand total of cart, you need to define a function (let's say calculateTotal) that implements sort of this pseudocode:</p> <pre><code>function calculateTotal begin get all checkboxes under myDiv for each selected check box begin get check box id get substring of id, after comma (",") add substring (price) to total end end </code></pre> <p>This method should be triggered whenever user clicks add item button, remove item button, and checkboxs' onChange events fire. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload