Функция Javascript в приложении Angular Single Page Application не работает
Я пытаюсь получить модальное окно javascript на странице php в приложении Angular на одну страницу. Эта страница загружается после исходного index.html. HTML-теги записываются как:
<html ng-app="myApp" class="ng-scope">
…и содержимое со страниц, которые загружены в, хранятся в:
<div ng-view="" class="ng-scope">
Есть javascript на определенной странице php, которая выдает ошибку. Вот полная страница php, включая javascript внизу:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img id="popup_img" src="#">
</div>
</div>
<div id="screenings">
<?php
$db = mysqli_connect("localhost", "root", "", "database");
$sql = "SELECT * FROM screenings";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_array($result)){
echo "<div id='img_div' onClick='btn()'>";
echo "<img id='img_screenings' class='modal_img' src='images/".$row['image']."' >";;
echo "<p id='screenings_p' align='center'>" .$row['venue']."</p>";
echo "<p id='location_p' align='center'>" .$row['location']."</p>";
echo "<p id='date_p' align='center'>".date('F j, Y',strtotime($row['date']))."</p>";
echo "</div>";
}
?>
</div>
<script>
$document.ready(function(){
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
//var btn = document.getElementsByClassName("modal_img");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
$("img").on("click", function() {
var source = ( $(this).attr("src") );
//alert(source);
//$('#modal_popup').text(source);
$('#popup_img').prop('src', this.src);
});
// When the user clicks the button, open the modal
function btn() {
modal.style.display = "block";
}// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
})
</script>
</body>
В частности, я получаю эту ошибку в консоли Chrome: «Uncaught ReferenceError: btn не определен
на HTMLDivElement.onclick «
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …