1

I am following this tutorial from W3Schools on how to build a slideshow using HTML, CSS, and Javascript. On the website I am developing, I would like the thumbnails at the bottom and the arrows on the sides to be initially hidden, until the user presses a button.

To do so, in the CSS file, I have set the visibility: hidden;. The CSS code for the class dot, which is the bottom thumbnail, is as follows: 

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    visibility: hidden;
    transition: background-color 0.6s ease;  
}

In the Javascript action for the button, I have set the visibility of the document's elements under the class "dot" to visible, like so:

document.getElementsByClassName("dot").style.visibility="visible";

I have verified that this action is being triggered when the button is pressed through an alert() view. Every line of code seems to run as intended up until this command. Also, the thumbnails at the bottom (the "dot" elements) do not appear, so their visibility does not become visible as intended.

Any ideas on why this may be, or how I can fix it? Thanks a lot for your help!

tennis25
  • 99
  • 1
  • 2
  • 12

2 Answers2

2

This document.getElementsByClassName("dot") returns an array and you cannot apply a style attribute to the array.

I'll give you a couple ideas about how you might approach or reconsider this problem.

1) loop through the array and apply a style to each element

var elements = document.getElementsByClassName("dot")
for(var i = 0; i < elements.length; i++) {
    elements[i].style.visibility = "visible";
}

2) give an ID to each class and call document.getElementById("someID")

<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>

document.getElementyById("one").style.visibility = "visible";
document.getElementyById("two").style.visibility = "hidden";
document.getElementyById("three").style.visibility = "hidden";
ThisClark
  • 14,352
  • 10
  • 69
  • 100
  • Perfect, thanks so much! – tennis25 Jul 24 '18 at 00:28
  • 1
    Also, when writing script like this do you use the console to detect error messages? Keyboard shutcut on Windows is CTRL+SHIFT+K and OSX is CMD+OPTION+J... I find it is essential for JavaScript development on the browser client side. If the error message isn't clear enough it can be included with the question to really help narrow down the problem. – ThisClark Jul 24 '18 at 00:39
  • currently I just use the alert() command to print any results or errors that may occur. Thank you for this advice, I'll definitely use it now for future development! – tennis25 Jul 24 '18 at 00:43
  • 1
    You can print results to the console there with `console.log("some message " + someVariable)` for example. Some advantages include not having to wait to clear or click through alerts and the ability to copy and paste from the console. – ThisClark Jul 24 '18 at 00:48
  • Perfect, I just tried that out, and it's a lot easier and cleaner than using alert() for each output! Thanks again! – tennis25 Jul 24 '18 at 00:57
2

document.getElementsByClassName() will return an array.

If you have only one element you could use the first index in the array:

document.getElementsByClassName("dot")[0].style.visibility="visible";

Else if you have more that one:

var dot = document.getElementsByClassName("dot")
for(var i = 0; i < dot.length; i++) {
    dot[i].style.visibility = "visible";
}