I can't seem to find out the correct way to write this script; can someone please point me in the right direction, or offer an alternate way. I have looked but cannot find any relative examples. I am pulling info from a database with php/mysqli and echoing it in prospective divs with an onclick pointing to a javascript function. This all works great. The problem I am having is the 'innerHTML' includes an onclick pointing to a javascript function also; this doesn't seem to work. Is it possible to have a document.getelementbyid('somthing').innerHTML that contains a function call? I am not sure if I asked that write. The code is below. Thanks for any help.
<?php
$sql50 = "SELECT * FROM videos ORDER BY id DESC";
$result50 = mysqli_query($conn, $sql50);
if (mysqli_num_rows($result50) > 0) {
while($row = mysqli_fetch_assoc($result50)) {
$videopath = $row["videopath"];
$posterpath = $row["posterpath"];
$user = $row["user"];
echo "
<div class='vidresponsive'><div class='vidgallery'>
<img onclick='showplay(this)' data-id='$videopath' data-id1='$posterpath' data-id2='$user'
data-id3=".$_SESSION["myspot"]." src='" . $row["posterpath"] . "' width='300px' height='160px' id='next' name='next'>
<div class='viddesc'>" . $row["title"] . "</div></div></div>";
echo "
<script>
function showplay(img) {
var id= img.getAttribute('data-id');
var id1= img.getAttribute('data-id1');
var id2= img.getAttribute('data-id2');
var id3= img.getAttribute('data-id3');
document.getElementById('crab').style.display='none';
document.getElementById('sticky').innerHTML = \"<div class='controls'>\
<video style='width:60vw;' controls autoplay poster='\" + id1 + \"'>\
<source src='\" + id + \"' type='video/mp4'>\
</video>\
<br><span id='saywhat' onclick='liking();' class='point'><i id='thumbing' class='fa fa-thumbs-up notlike'></i></span>\
</div>\"
}
</script>";
}
} else {
echo "Sorry, there's nothing here.";
}
mysqli_close($conn);
?>
<div class="vidclearfix"></div>
<script>
var id2= img.getAttribute('data-id2');
var id3= img.getAttribute('data-id3');
function liking() {
$.ajax({
url:'actions/like.php',
type:'POST',
data:{
id2: id2, id3: id3
}
});
document.getElementById('saywhat').innerHTML += "Thank You";
document.getElementById("thumbing").classList.remove('notlike');
document.getElementById("thumbing").classList.add('like');
}
</script>
I just can't seem to get the function 'liking' to work, it's like it's non-clickable and nothing happens when i do click it. A nudge in the right direction would be greatly appreciated. Thank you very much.
This has been updated now and works if anyone needs any of it for a reference.
In the external script variables id2 & id3 needed to be defined.
var id2= img.getAttribute('data-id2');
var id3= img.getAttribute('data-id3');
Also the last innerHTML statement was missing the operator +.
document.getElementById('saywhat').innerHTML += "Thank You";
The PHP is echoing a script function showplay(img); this can be moved outside of the php and still work. If left inside of the PHP it will place the same script on the page as many times as there are results in the database; this script only needs to be included once and not multiple times.