UPDATE: I believe I have solved the issue! However, if anyone has suggestions on a better way to achieve this, I am open to learning. I'm still fairly new to Javascript!
I have an image and a table containing text. My goal is to change the color of SOME of the text in the table when I hover over the image. The current code works well for a SINGLE sticker, but when I attempt to use a class (e.g. class="sticker3") and .getElementsByClassName("sticker3"), it fails to work.
<span id="sticker3" style="font-size: 30px; margin: 0px; line-height: 0px; color: #000000;">✿</span>
<script>
function upDate(){
document.getElementById('sticker3').style.color = "#FF0000";
}
function unDo(){
X = document.getElementById('sticker3');
X.style.color = "";
document.getElementById('sticker3').style.color = "FFFFFF";
}
</script>
When I tried to adjust the code as shown below, it no longer functions.
<span class="sticker3" style="font-size: 30px; margin: 0px; line-height: 0px; color: #000000;">✿</span>
<script>
function upDate(){
document.getElementsByClassName('sticker3').style.color = "#FF0000";
}
function unDo(){
X = document.getElementsByClassName('sticker3');
X.style.color = "";
document.getElementsByClassName('sticker3').style.color = "FFFFFF";
}
</script>
I have included an image for better understanding of what I am attempting to achieve. As depicted, only one flower turns red upon hovering over image 1, while I wish for all the flowers in that column to turn red. VIEW IMAGE
Code Snippet
function upDate() {
document.getElementsByClassName('sticker3').style.color = "#FF0000";
}
function unDo() {
X = document.getElementsByClassName('sticker3');
X.style.color = "";
document.getElementsByClassName('sticker3').style.color = "FFFFFF";
}body {
font-family: sans-serif;
}
table {
border-collapse: collapse;
}
td,
th {
border: thin solid lightgray;
padding: 0.2rem;
}
.sticker3:after {
content: "✿";
font-size: 20px;
margin: 0px;
line-height: 0px;
color: #000000;
}
.hoverbox {
width: 10rem;
display: inline-block;
border: thin solid gray;
background-color: lightyellow;
margin: 0.5rem;
padding: 0.5rem;
}<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Fig 1</th>
<th>Fig 2</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><span class="sticker3"></span></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><span class="sticker3"></span></td>
</tr>
<tr>
<td></td>
<td><span class="sticker3"></span></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><span class="sticker3"></span></td>
</tr>
<tr>
<td></td>
<td><span class="sticker3"></span></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><span class="sticker3"></span></td>
</tr>
</tbody>
</table>
<div id="hover1" class="hoverbox">Fig 1 Hover</div>
<div id="hover2" class="hoverbox">Fig 2 Hover</div>