javascript issue with showing content on click

I'm currently working on a school assignment where I am using the onclick() function to display information about an object. However, I am facing an issue where the information is not popping up as expected.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>IGS-Plattegrond</title>
        <link rel="stylesheet" href="css/MyCSS.css">
        <script src="js/main.js"></script>
    </head>
    <body>
        <section>
            <div class="map">
                <img src="images/plattegrond.jpg" alt="IGS Plattegrond" usemap="#igsmap">
                <map name="igsmap">
<!--        Map buttons               -->
                    <area shape="rect" coords="522,263,542,285" alt="stand 1" href="#" onclick='show(1);'>
                    <area shape="rect" coords="458,311,479,334" alt="stand 2" href="#" onclick='show(2);'>
                    <area shape="rect" coords="458,213,477,232" alt="stand 3" href="http://www.google.nl">
                    <area shape="rect" coords="587,315,606,335" alt="stand 4" href="http://www.google.nl">
                    <area shape="rect" coords="586,214,605,231" alt="stand 5" href="http://www.google.nl">
                    <area shape="rect" coords="522,167,542,188" alt="stand 6" href="http://www.google.nl">
                    <area shape="rect" coords="523,125,540,142" alt="stand 7" href="http://www.google.nl">
                    <area shape="rect" coords="237,126,251,141" alt="stand 8" href="http://www.google.nl">
                    <area shape="rect" coords="192,319,207,332" alt="stand 9" href="http://www.google.nl">
                    <area shape="rect" coords="266,303,280,319" alt="stand 10" href="http://www.google.nl">
                    <area shape="rect" coords="228,407,246,424" alt="stand 11" href="http://www.google.nl"> 

                </map>
            </div>
            <div class="info">
                <h2 class="text-center">IGS Interactive map</h2>
                <h3 class="text-center">instructions</h3>
                <p class="text-center"> Click on a stand number to retrieve information  </p>
              <a href="#" onclick='show(1);'>Table 1</a>

            <div id="table1"> Content of 1 </div>
            <div id="table2"> Content of 2 </div>
            <div id="table3"> Content of 3 </div>
            <div id="table4"> Content of 4 </div>      


            </div>
        </section>

    </body>

</html>

CSS 

section {
    width:80%;
    height:100%;
    margin:auto;
}
.map {
    width:45%;
    float:left;
    margin-right:5%;
}
.info {
    float:right;
    width:45%;
    margin-left:5%;
}
.text-center {
    text-align:center;
}

#table1, #table2, #table3, #table4, #table5 {
    display: none;
}

Javascript

function show(nr) {
    document.getElementById("table1").style.display="none";
    document.getElementById("table2").style.display="none";
    document.getElementById("table3").style.display="none";
    document.getElementById("table4").style.display="none";
    document.getElementById("table5").style.display="none";
    document.getElementById("table"+nr).style.display="block";
}

I've been following a tutorial and it worked for the instructor, but I seem to be missing something. Any help or insight would be greatly appreciated.

Best regards, Dennis

javascriptjqueryhtmlcssoneclick

Answer №1

table5 does not exist

function hide(nr) {
                for (let i = 1; i <= 10; i++) {
                    document.getElementById("table" + i).style.display = "none";
                }
                console.log("Hiding all tables except table" + nr);
                if (nr >= 1 && nr <= 4) {
                    document.getElementById("table" + nr).style.display = "block";
                } else {
                    console.error("Invalid table number provided: ", nr);
                }
            }
section {
                width:80%;
                height:100%;
                margin:auto;
            }
            .map {
                width:45%;
                float:left;
                margin-right:5%;
            }
            .info {
                float:right;
                width:45%;
                margin-left:5%;
            }
            .text-center {
                text-align:center;
            }

            #table1, #table2, #table3, #table4 {
                display: none;
            }
<!DOCTYPE html>
<html>
    <head>
        <title>Interactive Floor Plan</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/script.js"></script>
    </head>
    <body>
        <section>
            <div class="map">
                <img src="images/floorplan.jpg" alt="Floor Plan" usemap="#floorplanmap">
                <map name="floorplanmap">
                    <area shape="rect" coords="50,70,90,110" alt="Room 1" href="#" onclick='hide(1);'>
                    <area shape="rect" coords="120,40,160,80" alt="Room 2" href="#" onclick='hide(2);'>
                    <area shape="rect" coords="190,100,230,140" alt="Room 3" href="#" onclick='hide(3);'>
                    <area shape="rect" coords="250,30,290,70" alt="Room 4" href="#" onclick='hide(4);'>
                </map>
            </div>
            <div class="info">
                <h2 class="text-center">Interactive Floor Plan</h2>
                <h3 class="text-center">Instructions:</h3>
                <p class="text-center">Click on a room to view more information.</p>

                <a href="#" onclick='hide(1);'>Show Room 1</a>
                
                <div id="table1"> Information about Room 1 </div>
                <div id="table2"> Information about Room 2 </div>
                <div id="table3"> Information about Room 3 </div>
                <div id="table4"> Information about Room 4 </div>
            </div>
        </section>
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to display a PHP success message using AJAX

So I have this code where I am trying to create a form in PHP and send a message. The message is being submitted successfully, but I am facing an issue when it comes to displaying a success message. The page submits the data but does not show any output. H ...

javascriptphpjqueryajax

Angular2 - Utilizing Promises within a conditional block

I'm currently facing an issue where I need to await a response from my server in order to determine if an email is already taken or not. However, I am struggling to achieve this synchronously. TypeScript is indicating that the function isCorrectEmail( ...

javascriptangulartypescriptpromiseangular2-template

Exploring the Past: How the History API, Ajax Pages, and

I have a layout for my website that looks like this IMAGE I am experimenting with creating page transitions using ajax and the history API. CODE: history.pushState(null, null, "/members/" + dataLink + ".php" ); // update URL console. ...

javascriptjqueryajaxjsonhistory

Include a flexible div in the hero section and change the position when resizing the screen

Looking to achieve a specific layout with only two resolutions in mind (767px minimum and maximum). For screens larger than 767px, display two divs side by side: one with text on the left and the other with an image on the right. The text remains in a fi ...

htmlcssbootstrap-4

Tips on displaying a single column in Bootstrap when only one item is present and switching to two columns when two items are present

Currently, I am utilizing the row class in Bootstrap which contains two columns, one for X and one for Y. There are scenarios where either the X column, the Y column, or both may be present within the row. Since a row can have up to 12 columns, when only t ...

htmlcssbootstrap-4

Creating a PNG image on a canvas, converting it to a data URL, and then transmitting it using an XMLHttpRequest in NodeJS/Express

I've been experimenting with different methods found on Google, but so far none have worked for me. I'm currently working on implementing the signature-pad, a JavaScript/HTML5 canvas solution for eSignatures. My goal is to save the canvas data as ...

javascriptnode.jscanvasxmlhttprequest

Update the content retrieved through ajax periodically

Looking to set up a periodic update for this ajax fetch function, say every 10 seconds. I've tried a few approaches but none seem to work as expected. That's why I'm reaching out here for help. So, any idea how I can refresh the content ev ...

phpjqueryhtmlajax

Place the bottom element of the top parent element in position

Creating a simple tooltip with bottom positioning at the top of the parent element involves setting a negative height for the tooltip element. However, when checking the height of the tooltip element upon hovering, it returns 0 according to console.log(). ...

javascriptjquerycsstooltip

Error encountered while attempting to validate JWT

This question has been asked multiple times, but I'm still struggling to find the root cause of the issue. I have already signed some data with a token, but when I attempt to verify it, I receive an error message saying "jwt malformed". Interestingly, ...

javascript

Set up webpack on your Mac using npm

Seeking help to install webpack using npm: sudo npm install -g webpack The following error message is encountered: node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp WARN Pre-built binaries not installable for <a href="/cdn- ...

javascriptnode.jsnpmwebpack

Is there a way to utilize the function body onload in jQuery?

I have some code that needs to be fixed. Currently, when I see <body onload="start()" onresize="resize()" onorientationchange="resize()">, I want the following code snippet to work: $("button").click(function(){ $("body").onload = start; or win ...

javascriptjqueryajaxhtml

Despite being a valid <link rel="shortcut icon">, a validation error occurs

I'm encountering an error with the w3.org validator related to this line of code: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> The error message provided is as follows: Line 1, Column 727: Invalid value shortcut icon f ...

htmlfaviconw3c-validation

What impact does the order of the element I'm specifying in my .css file have on its appearance after being rendered?

(An update has been added below) In my project, I am working with a .css file and an index.html document. The goal is to create a panel of buttons on the screen [to prototype the usability of a touchscreen interface], with each button assigned a specific ...

htmlcss

Struggling to locate the Twitter direct message input box with Xpath in Selenium

I have been struggling to locate the textbox element using the find_element_by_xpath() method. Unfortunately, every time I try it, I receive an error stating that the element cannot be found. Here is the specific line of code in question: Despite attempti ...

pythoncssseleniumxpath

Arrange divs in vertical columns

My markup is fixed and I am only allowed to add <div> elements to the container. Here is the current structure: <div class="container"> <div class="box" id="box1">1</div> <div class="box" id="box2">2</div> < ...

htmlcss

Struggling to retrieve data from AJAX POST request [Revised Post]

I am encountering an issue with posting a form using the AJAX POST method in jQuery. I am using the serialize method to retrieve the form data, but it seems to fail. The problem might be related to the JavaScript files of the Steps Wizard plugin that I am ...

javascriptphpjqueryajax

Backstretch.js experiencing issues with element functionality, but functioning correctly with body element

I'm having trouble getting backstretch to work on a div. It works perfectly when applied to the body with no errors, but when I try to apply it to a <div>, I get this error: Uncaught TypeError: Object [object Object] has no method 'backs ...

jqueryjquery-backstretch

Every time Jquery tries to retrieve cookies, it consistently returns as undefined

Having trouble accessing Application cookies using jquery in my Asp.Net MVC App. Check out this Screenshot of Cookie and its Value. I've been trying to access the Cookie with $.cookie('ASP.NET_SessionId'); but it keeps returning "undefined" ...

javascriptjqueryasp.net-mvc

The input '{ data: InvitedUser[]; "": any; }' does not match the expected type 'Element'

I'm currently facing a typescript dilemma that requires some assistance. In my project, I have a parent component that passes an array of results to a child component for mapping and displaying the information. Parent Component: import { Table } fr ...

javascriptreactjstypescriptsemantic-ui-react

Delay in form submission

I am attempting to auto-submit a form with its value after 10 seconds. I am having trouble incorporating a setTimeout function with the submit action. setTimeout(function() { $('#FrmID').submit(); }, 10000); $(document).ready(function() { ...

phpjqueryajax