单击复选框后，addEventListener无法正常工作

Question

I have a problem with my javascript. Everytime I click the checkbox, the eventlistener is not working. Screenshot

I used this code for 2 PHP pages. The one is working, and the other one is not working. This is not an external javascript. It's supposed to enable the buttons in a spinner and the textboxes in the form.

<div class="checkbox-custom checkbox-success">
    <input type="checkbox" name="inclusion[]" id="inclusionName<?php echo $inclusionId ?>" value="<?php echo $inclusionId ?>">
    <label for="<?php echo $inclusionId ?>">&nbsp;&nbsp;&nbsp;<?php echo $inclusionName ?></label>
</div>

I tried to change the function name and it still isn't working.

<script>
var inclusionSelect<?php echo $inclusionId ?> = document.getElementById('inclusionName<?php echo $inclusionId ?');

inclusionSelect<?php echo $inclusionId ?>.addEventListener("click", function selectCheck<?php echo $inclusionId ?>() {

if (inclusionSelect<?php echo $inclusionId ?>.checked == true) {
    totalPrice = totalPrice + totalUnitPrice<?php echo $inclusionId ?>;
    document.getElementById("totalPrice").value = totalPrice.toFixed(2);
    document.getElementById('unitCount<?php echo $inclusionId ?>').disabled=false;
    document.getElementById('unitCountUp<?php echo $inclusionId ?>').disabled=false;
    document.getElementById('unitPrice<?php echo $inclusionId ?>').disabled=false;
    document.getElementById('totalUnitPrice<?php echo $inclusionId ?>').disabled=false;


    if (unitCount<?php echo $inclusionId ?> >= 1) {
        document.getElementById('unitCountDown<?php echo $inclusionId ?>').disabled=false;
    }

    if (unitCount<?php echo $inclusionId ?> >= 99) {
        document.getElementById('unitCountUp<?php echo $inclusionId ?>').disabled=true;
    }
}
else {
    totalPrice = totalPrice - totalUnitPrice<?php echo $inclusionId ?>;
    document.getElementById('totalPrice').value = totalPrice.toFixed(2);
    document.getElementById('unitCount<?php echo $inclusionId ?>').disabled=true;
    document.getElementById('unitCountUp<?php echo $inclusionId ?>').disabled=true;
    document.getElementById('unitCountDown<?php echo $inclusionId ?>').disabled=true;
    document.getElementById('unitPrice<?php echo $inclusionId ?>').disabled=true;
    document.getElementById('totalUnitPrice<?php echo $inclusionId ?>').disabled=true;
}

}, false);
</script>

Answer 1

(I take the liberty to post this as an answer, while it isn't. I just need the space.)

Please post the actual HTML produced by this script, makes it MUCH easier to debug.

But one thing I find awkward is:

id="inclusionName<?php echo $inclusionId ?>"

versus

label for="<?php echo $inclusionId ?>"

The second should be also "inclusionName<?php echo $inclusionId ?>" for your label to match.