Your js code contains errors. Also, in the html structure, you did not wrap the class names in quotation marks. Like that:
class = picture
instead of for, I used the forEach() method in which I determined the current image:
picture.forEach(function (picture_current, index) {
picture_current.addEventListener("mouseover", function () {
...
document.addEventListener('DOMContentLoaded', function () {
let picture = document.querySelectorAll('.picture');
picture.forEach(function (picture_current, index) {
picture_current.addEventListener("mouseover", function () {
var text;
var pictureid = this.getAttribute('id');
if (pictureid === 'pic1') {
text = 'First response';
} else {
text = 'Second response';
}
document.querySelector('#subtext').innerHTML = text;
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<img src="IMG_1.jpg" width="300" height="400" class="picture" id="pic1">
<img src="IMG_2.jpg" width="300" height="400" class="picture" id ="pic2">
<sub id="subtext"></sub>
</body>
</html>
a couple of typos but biggest problem was querySelectorAll returns an array
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<img src="IMG_1.jpg" width="300" height="400" class = picture id="pic1">
<img src="IMG_2.jpg" width="300" height="400" class = picture id ="pic2">
<sub id="subtext"></sub>
<script>
document.addEventListener('DOMContentLoaded', function() {
let picture = document.querySelectorAll('.picture');
for (let i = 0; i <picture.length; i++) {
picture[i].addEventListener("mouseover", function () {
var text;
var pictureid = picture[i].id;
if (pictureid === 'pic1') {
text = 'First response';
} else {
text = 'Second response';
}
document.getElementById('subtext').innerHTML = text;
}
)};
});
</script>
</body>
</html>
New to javascript, and I am attempting to make text appear below an image when the user mouses over it. For the HTML, I have created an empty sub tag with the id ‘subtext’ () below two images, and I am attempting to use a for loop, and if else statement to have a specific message occupy the subtext depending on which image is experiencing “mouseover”.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
</head>
<script>
document.addEventListener('DOMContentLoaded', function() {
let picture = document.querySelectorAll('.picture');
for (let i = 0; i <picture.length; i++) {
picture.addEventListener("mouseover", function () {
var text;
var pictureid = picture.getElementById();
if (pictureid === '#pic1') {
text = 'First response';
} else {
text = 'Second response';
}
document.getElementById('#subtext').innerHTML = text;
}
)};
});
</script>
<body>
<img src="IMG_1.jpg" width="300" height="400" class = picture id="pic1">
<img src="IMG_2.jpg" width="300" height="400" class = picture id ="pic2">
<sub id="subtext"></sub>
</body>
</html>
See here for error message – that I am missing a semicolon and have an unnecessary one at the same time
The curly braces should come before parenthesis. Change
@THARP, no problem. Glad to help.
