1

I want to access the raw output of a HTML element that contains Javascript in it.

The HTML element (it's running inside of a PHP loop that cycles products currently in the cart):

<h5 id="price-<?php echo $i ?>">US$ <script>var price = <?php echo $product['price'] ?>; document.write(price);</script></h5>

Later in the code I've a function that runs when the quantity is changed.

The Javascript function reads & prints the quantity correctly, but it doesn't read the price correctly (returns a "undefined" when pricet is to be outputted).

function updatetotal(i){
       var qty = document.getElementById(i).value;
       var pricet = document.getElementById('price-'+i).value;
       document.getElementById('sub-'+i).innerHTML = '$ '+pricet; //Testing purposes
}

Here is the line of code where output appears (The script is just to load the initial item total on page load) (Note this is inside of the PHP loop that cycles products currently in the cart, i.e. PHP variable i is the item's number in the cart):-

<h5 id="sub-<?php echo $i ?>">US$ <script>var qty = document.getElementById('<?php echo $i ?>').value; var sub_price = price * qty; total_price += sub_price; document.write(sub_price)</script></h5>

The function is called inside the on-click event of these two buttons that increase/decrease the quantity of an item:-

<input type="text" name="<?php echo $i ?>" id="<?php echo $i ?>" maxlength="12" value="<?php echo $qty[$i] ?>" title="Quantity" class="input-text qty"/>
<button onclick="var result = document.getElementById('<?php echo $i ?>'); var sst = result.value; if( !isNaN( sst )) result.value++;updatetotal(<?php echo $i ?>);return false;" class="increase items-count" type="button"><i class="lnr lnr-chevron-up"></i></button>
<button onclick="var result = document.getElementById('<?php echo $i ?>'); var sst = result.value; if( !isNaN( sst ) &amp;&amp; sst > 0 ) result.value--;updatetotal(<?php echo $i ?>);return false;" class="reduced items-count" type="button"><i class="lnr lnr-chevron-down"></i></button>

(I have omitted extra code for the sake of keeping the code presented short & to the point. It's available if you want more information)

Rocking_Star101
  • 11
  • 2
  • Advice: Put the code of you onclick events in separate handler functions. Easier to read and easier to handle. – Tyr Mar 16 '19 at 14:09
  • You need to [move away from inline event handling](https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991) and abandon that 25+ year old approach you are using now. Also, only form related elements will have a `value`. Non-form elements will have `.textContent` and `.innerHTML`. – Scott Marcus Mar 16 '19 at 14:25
  • Thank you! I'm still a learner & am heavily interested in learning good practice, & things of that nature. I'll work on converting to use event listeners. Oh, I did forget to mention that the elements are inside of a form already. – Rocking_Star101 Mar 16 '19 at 15:19
  • Be careful, just because an element is "inside" of a `
    ` element doesn't make it a "form field". Form fields are those that users can interact with such as ``, `
     – Scott Marcus Mar 16 '19 at 15:41

0 Answers0