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

Utilizing async/await in JavaScript within a class structure

I am facing a dilemma in using the new async/await keywords within the connect method of my JavaScript class. module.exports = class { constructor(url) { if(_.isEmpty(url)) { throw `'url' must be set`; } ...

javascriptnode.jsasynchronousasync-await

Having trouble with Touch Event functionality in FullCalendar version 3.9?

I am currently using the FullCalendar 3.9 version plugin to display Driver events. The issue I'm facing is that the click event works fine on desktop view, but not on mobile devices since touch events are used there. How can I bind a touch event on th ...

jquerylaravelfullcalendarfullcalendar-4fullcalendar-3

The TypeScript declarations for the scss module are malfunctioning

Just recently, I set up a React project using rollup. Below is the configuration file for my rollup setup: rollup.config.js import serve from "rollup-plugin-serve"; import livereload from "rollup-plugin-livereload"; import babel from &q ...

javascriptreactjstypescriptsasstyped

Ways in which an ajax response containing a string can be utilized to populate an HTML table by leveraging PHP, MySQL, and

Is there a way to populate an HTML table with data retrieved from an AJAX call? I have a string returned from the AJAX request that looks like this: 1-1.00-2013-2014,2-2.00-2013-2014,3-3.00-2013-2014,4-4.00-2013-2014,6-5.00-2013-2014,8-6.00-2013-2014,10-7 ...

phpjqueryajax

Undefined result displayed when using Coffeescript with $.ajax

I am currently working with a front-end framework and trying to render a page. I have an initializer that calls a function which performs an AJAX call to the backend. Even though the request is successful in Chrome dev tools, every time I use console.log i ...

jquerycoffeescript

Ways to locate two div class elements that are generated dynamically

I am looking to dynamically create 2 divs in different locations. One for displaying information and another for editing information. I want to be able to delete both divs with the same class when using the delete button. Since they are located in differe ...

javascriptjqueryfrontend

How can I arrange a specific array position in Vuejs according to the Id value?

<div v-for="(item, index) in gr" :key="space.id" class="val-name"> </div> After making a few modifications to the API call logic, I was able to achieve my desired outcome. However, the issue lies in the fact that ...

javascriptvue.js

Styling a Fixed Header in CSS/HTML - Scroll Effect

Is it possible to hide only the upper part of the nav-bar, similar to the behavior in WhatsApp? I am using material-ui for this particular use-case. Currently, my implementation causes the app-bar to extend only when the scroll position is less than 48px, ...

cssreactjsmaterial-ui

Obtain a specific element in Puppeteer JS by utilizing the waitForSelector function to detect when its class name changes

I am faced with a situation where I need to wait for a specific element to change its classes dynamically. The challenge arises when utilizing the waitForSelector function, as it fails to work when no new element is added to the DOM. Instead, it is the &l ...

javascriptnode.jsweb-scrapingnext.jspuppeteer

Basic inquiries concerning Vue.js and JavaScript

Hey there, I recently developed a small app to practice my Vue skills. However, there are a few features that I would like to implement but I'm not sure how to do it just yet. <div class="container" id="app"> <div class="row"> <d ...

javascripthtmlvue.jsvuejs2

javascript string assignment

Is it possible to conditionally assign a string based on the result of a certain condition, but for some reason, it's not working? var message = ""; if (true) { message += "true"; } else { message += "false" } console.log(message); ...

javascriptnode.js

Can you explain the steps to implement this feature in a modal window using jQuery?

My HTML list contains a bunch of li elements. ul li img .det li I am looking to create a modal popup that appears when I click on something. I want this modal popup to have previous and next buttons, preferably implemented using jQuery. I have alr ...

javascripthtmlcss

`How can you generate navigation paths using the ngRoute module?`

I am currently working on creating a basic navigation system like the one illustrated below: html: <html ng-app="myapp"> <body> <ul> <li><a href="pages/sub1">sub1</a></li> <li><a href="pages/ ...

javascriptangularjs

Display a particular div when a specific image is present within another div

I'm currently working on a task, but I'm having trouble with it. If I have an image called smiley.png within a div with the class "selected." <div class="selected" style=""><img width="25" height="24" src="images/smileys/smiley.png ...

javascripthtmlcss

Is there a white outline on the Cordova Text Font?

Currently working on a Cordova app where I have encountered an issue with the text display. The problem lies in the white outline surrounding the text, which is not visually appealing. In my code, I have a div with the style attribute background-color: ye ...

csshtmlcordova

Puppeteer exhibiting unexpected behavior compared to the Developer Console

My goal is to extract the title of the page using Puppeteer from the following URL: Here's the code snippet I am working with: (async () => { const browser = await puppet.launch({ headless: true }); const page = a ...

javascriptnode.jsweb-scrapingpuppeteer

Seeking a precise placement, must find a CSS-only answer

After spending two days experimenting with different CSS styles like absolute positioning, inline/inline-block display, and flex display, I have yet to find a solution for styling a timestamp's label position using pure CSS. https://i.stack.imgur.com ...

htmlcsspositioncss-positionpure-css

Utilizing the power of jQuery's .each() method to assign a function to numerous slideshow containers

On my one-page website, I have numerous small jQuery Cycle slideshow divs with varying data-values, like: <div class="foo bar" data-value="1000"> <img src="directory/img_0.jpg" alt="img 0" /> <img src="directory/img_1.jpg" alt="img ...

jqueryfunctioncycleeach

Utilizing Angular Directives and Controllers for Improved Efficiency

I have developed a custom dropdown option selector which is functioning well. It includes functions to fetch data from a specified URL in order to populate a list. However, the issue arises when I attempt to reuse this component in a different section of ...

javascriptangularjsoopcontrollersingleton

The issue with the trigger function in jQuery is specifically affecting Chrome browser

When attempting to load a modal window using a link like , I am encountering issues in Chrome, Safari, and IE. However, Opera and FF are functioning properly. The modal window is being called as an iframe. Other buttons that are supposed to open the modal ...

javascriptjquerygoogle-chromeiframetriggers