JavaScript element style change with dynamic id - php

Question

I am trying to put a line through a list item when the check box next to it is checked. I have managed to do it but I can't check if the the box is checked.
JS File
if(document.getElementById(theID).checked){
document.getElementById(theID).setAttribute("style", "text-decoration:line-through");
}
HTML/PHP
echo'<ol>';
foreach($to_do_XML->task as $item)
{
$theID = $item['id'];
echo '<li id="'.$theID.'">'.$item.'</li>' ;?><form ><input onclick="return cross('<?=$theID?>');" type="checkbox" name="done<?php $li_id_num_done ?>"/></form>
<?php
}
echo '</ol>';
i should also add that the list item is being added within a foreach loop looping trough xml elements
The above code does nothing any help would be appreciated

Answer 1

If $theID is a string, you need quotes around it:
<input onclick="return cross('<?php echo $theID; ?>');" type="checkbox" name="done<?php $li_id_num_done ?>"/>
Also remove this from your function:
got_elements_id
It will cause a reference error.

Answer 2

This would be better I believe:
echo '<li id="'.$theID.'">'.$item.'</li>' ;?>
<form >
<input onclick="return cross('<? echo $theID; ?>');" type="checkbox" name="done<?php $li_id_num_done ?>"/>
</form>
And
function cross( id ){
var element = document.getElementById( id );
if( element.checked){
element.style.textDecoration = "line-through";
}
}
Or even:
function cross( id ){
var element = document.getElementById( id );
element.style.textDecoration = element.checked ? "line-through" : "";
}
Which also enables unchecking and removing the linethrough.