JavaScript – img caption to appear/disappear onclick event

I need to have image caption to appear on 1 mouse click and disappear on next click by using JS. I can’t figure out why the image caption is not appearing when I click on the image with onclick event and function use on external JS. Sorry if I make any mistake on question as this is my first post on the forum.

HTML

<div id="section1" >
        <h1>Pictures from my vacation</h1>`enter code here`
        <figure style="float: left;" >
            <img src="Photos/p1.jpg" title="Beach" value="hide/show" onclick="showOrHide()">
            <figcaption id="showthis"  style="visibility: hidden;">Waterton Beach</figcaption>
        </figure>
    <p>Beautiful and Sunny day at Wateron last year. Taking Ferry to explore around the late and natural beauty surrounded there. It was a beatiful day and beach and small town with full of visitors. Hope to back to this beautiful small town on summer break.                                                                                                                                                                                         
    </p>
</div>

JS

function showOrHide() {

if (show=="false") {

document.getElementById("showthis").style.visibility="visible";
show="true";
    
}
else {
//show is true
document.getElementById("showthis").style.visibility="hidden";
show="false";
}

}

Answer

A few things to get you on your way:

1. I wouldn’t use onxyz-attribute-style event handlers. They can only call global functions, passing parameters to them is difficult because of handling text inside JavaScript code inside an HTML attribute, and various other things. I’d use modern event handling like addEventListener.

   But if you did want to use an onclick attribute for this, I’d use onclick="showOrHide(this)" (this will refer to the image that this click was on) and then accept an img parameter in the function, rather than using an id to do the lookup.

2. Boolean values like true and false don’t go in quotes.

3. You don’t seem to have declared your show variable anywhere.

4. I’d use a class rather than directly modifying the style of the element.

So with all that in mind:

"use strict";

document.addEventListener("click", event => {
    const img = event.target.closest(".toggle-image");
    if (img && img.nextElementSibling.tagName === "FIGCAPTION") {
        img.nextElementSibling.classList.toggle("hidden");
    }
});

.hidden {
    visibility: hidden;
}

<div id="section1">
    <h1>Pictures from my vacation</h1>`enter code here`
    <figure style="float: left;">
        <img src="Photos/p1.jpg" class="toggle-image" title="Beach" value="hide/show">
        <figcaption class="hidden">Waterton Beach</figcaption>
    </figure>
    <p>Beautiful and Sunny day at Wateron last year. Taking Ferry to explore around the late and natural beauty surrounded there. It was a beatiful day and beach and small town with full of visitors. Hope to back to this beautiful small town on summer break.
    </p>
</div>

That code uses event delegation by hooking click on the document as a whole and then, when the click occurs, seeing if the click was on an .image-toggle element (or passed through when bubbling). If it did, it looks at the next element after the img to see if it’s a figcaption and, if so, toggles a hidden class in the element’s class list element to show/hide the caption.

(Those links are to MDN, which is an excellent resource for web programming information.)