Javascript：第一个下拉框有效，而其他下拉框无效。 代码是一样的

Question

I am wanting to have nine drop-down boxes but currently only have two. The problem is that only one of them are working yet the code for both of them are the same apart from the obvious changes in ID's for different parts of the HTML. When i click the first one ("mid_side_button") it works perfectly and displays the content that has been created using CSS. When i click the other button ("right_side_button"), it doesn't do anything.

Here is the relevant Javascript and HTML < div > element containing the relevant sections.

Please do not take much notice of the CSS, it is only provided for further reference.

Please reply if any further information is needed.

 window.addEventListener('mouseup', function (event) { /* one of many approaches to open a dropdown */ "use strict"; var rightdropdown = document.getElementById('right_side_dropdown_content'); var rightdropdownbuttontoggle = document.getElementById('right_side_button'); if (event.target !== rightdropdown) { rightdropdown.style.display = 'none'; } }); window.onload = function () { "use strict"; var rightbutton = document.getElementById('right_side_button'); /* creating variable "midbutton" and calling the ID "mid_side_button" */ var rightdropdowncontent = document.getElementById('right_side_dropdown_content'); /* same as above */ document.onclick = function (e) { /* creating function "e" */ if (e.target === rightbutton) { /* if variable "midbutton" is clicked, display "middropdowncontent" */ rightdropdowncontent.style.display = 'block'; } }; }; window.addEventListener('mouseup', function (event) { /* one of many approaches to open a dropdown */ "use strict"; var middropdown = document.getElementById('mid_side_dropdown_content'); var middropdownbuttontoggle = document.getElementById('mid_side_button'); if (event.target !== middropdown) { middropdown.style.display = 'none'; } }); window.onload = function () { "use strict"; var midbutton = document.getElementById('mid_side_button'); /* creating variable "midbutton" and calling the ID "mid_side_button" */ var middropdowncontent = document.getElementById('mid_side_dropdown_content'); /* same as above */ document.onclick = function (e) { /* creating function "e" */ if (e.target === midbutton) { /* if variable "midbutton" is clicked, display "middropdowncontent" */ middropdowncontent.style.display = 'block'; } }; }; 

 .individual_left_side_links{ margin: 0px; margin-right: 5px; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; display: block; margin-bottom: 10px; box-shadow: 2px 2px 2px #888; background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%); overflow: auto; width: 300px; } #vehicle_3_header{ margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 0px; padding: 0px; background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%); width: 300px; float: right; border-bottom: 2px solid black; } .compare_sections_titles{ margin-left: 10px; margin-right: 10px; margin-top: 5px; margin-bottom: 0px; } #right_section{ margin-left: 5px; margin-right: 5px; margin-bottom: 5px; margin-top: 0px; float: right; text-align: center; padding-top: 20px; padding-bottom: 50px; width: 300px; margin-bottom: 10px; box-shadow: 2px 2px 2px #888; background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%); overflow:auto; } #right_side_button{ background-color: aqua; padding-right: 90px; padding-left: 90px; font-size: 16px; border: 1px solid grey; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; box-shadow: 2px 2px 2px #888; } #right_side_dropdown_content{ display: none; position:absolute; background-color: #f9f9f9; min-width: 220px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); margin-left: 40px; text-align: left; } #right_side_dropdown_content a{ color: black; padding: 12px 16px; text-decoration: none; display: block; } #right_side_dropdown_content a:hover { background-color: #f1f1f1; } #mid_section{ margin: 5px; float: left; width: 320px; text-align: left; padding-left: 10px; padding-right: 10px; background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%); box-shadow: 1px 1px 2px 2px #888; } #mid_side_button{ background-color: aqua; padding-right: 90px; padding-left: 90px; font-size: 16px; border: 1px solid grey; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; box-shadow: 2px 2px 2px #888; } #mid_side_dropdown_content{ display: none; position:absolute; background-color: #f9f9f9; min-width: 220px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); margin-left: 40px; text-align: left; } #mid_side_dropdown_content a{ color: black; padding: 12px 16px; text-decoration: none; display: block; } #mid_dropdown_text{ color: white; text-align:center; } #mid_side_dropdown_content a:hover { background-color: #f1f1f1 } 

 <div id="mid_container"> <header id="container_top_padder"> <li><h2 id="individual_top_padder_text">Compare Vehicles</h2></li> </header> <article id="left_section"> <nav id="left_side_nav"> <li><a class="individual_left_side_links">Cars</a></li> <li><a class="individual_left_side_links">Bikes</a></li> <li><a class="individual_left_side_links">Trucks</a></li> </nav> </article> <article id="mid_section"> <p>Title</p> <p>Subtitle</p> <p>Subtitle</p> <p>Subtitle</p> <button id="mid_side_button">Make</button> <div id="mid_side_dropdown_content"> <p><a class="mid_dropdown_text" href="#">Link 1</a></p> <p><a class="mid_dropdown_text" href="#">Link 2</a></p> <p><a class="mid_dropdown_text" href="#">Link 3</a></p> </div> </article> <header id="vehicle_3_header"> <h3 class="compare_sections_titles">Vehicle 3</h3> </header> <article id="right_section"> <button id="right_side_button">Make</button> <div id="right_side_dropdown_content"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> </div> </article> </div> <script type="text/javascript" src="Test3Javascript.js"></script> </body> </html> 

Answer 1

Please add window.load function's code in single function same as below or you just replace the script code it is working

    window.addEventListener('mouseup', function (event) {
        "use strict";
        var rightdropdown = document.getElementById('right_side_dropdown_content');
        var rightdropdownbuttontoggle = document.getElementById('right_side_button');

        var middropdown = document.getElementById('mid_side_dropdown_content');
        var middropdownbuttontoggle = document.getElementById('mid_side_button');

        if (event.target !== rightdropdown) {
            rightdropdown.style.display = 'none';
        }            
        else if (event.target !== middropdown) {
            middropdown.style.display = 'none';
        }
    });
    window.onload = function () {           
        "use strict";
        var rightbutton = document.getElementById('right_side_button');
        var rightdropdowncontent = document.getElementById('right_side_dropdown_content');

        var midbutton = document.getElementById('mid_side_button');
        var middropdowncontent = document.getElementById('mid_side_dropdown_content');

        document.onclick = function (e) {         /* creating function "e" */
            if (e.target === rightbutton) {
                /* if variable "midbutton" is clicked, display "middropdowncontent" */
                rightdropdowncontent.style.display = 'block';
            }
            else if (e.target === midbutton) {
                /* if variable "midbutton" is clicked, display "middropdowncontent" */
                middropdowncontent.style.display = 'block';
            }
        };
    };

Answer 2

 window.addEventListener('mouseup', function (event) { /* one of many approaches to open a dropdown */ "use strict"; var rightdropdown = document.getElementById('right_side_dropdown_content'); var middropdown = document.getElementById('mid_side_dropdown_content'); if (event.target !== middropdown) { middropdown.style.display = 'none'; } if (event.target !== rightdropdown) { rightdropdown.style.display = 'none'; } }); window.onload = function () { "use strict"; var rightbutton = document.getElementById('right_side_button'); /* creating variable "midbutton" and calling the ID "mid_side_button" */ var rightdropdowncontent = document.getElementById('right_side_dropdown_content'); var midbutton = document.getElementById('mid_side_button'); /* creating variable "midbutton" and calling the ID "mid_side_button" */ var middropdowncontent = document.getElementById('mid_side_dropdown_content'); document.onclick = function (e) { /* creating function "e" */ if (e.target === rightbutton) { /* if variable "midbutton" is clicked, display "middropdowncontent" */ rightdropdowncontent.style.display = 'block'; } if (e.target === midbutton) { /* if variable "midbutton" is clicked, display "middropdowncontent" */ middropdowncontent.style.display = 'block'; } }; }; 

 .individual_left_side_links{ margin: 0px; margin-right: 5px; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; display: block; margin-bottom: 10px; box-shadow: 2px 2px 2px #888; background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%); overflow: auto; width: 300px; } #vehicle_3_header{ margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 0px; padding: 0px; background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%); width: 300px; float: right; border-bottom: 2px solid black; } .compare_sections_titles{ margin-left: 10px; margin-right: 10px; margin-top: 5px; margin-bottom: 0px; } #right_section{ margin-left: 5px; margin-right: 5px; margin-bottom: 5px; margin-top: 0px; float: right; text-align: center; padding-top: 20px; padding-bottom: 50px; width: 300px; margin-bottom: 10px; box-shadow: 2px 2px 2px #888; background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%); overflow:auto; } #right_side_button{ background-color: aqua; padding-right: 90px; padding-left: 90px; font-size: 16px; border: 1px solid grey; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; box-shadow: 2px 2px 2px #888; } #right_side_dropdown_content{ display: none; position:absolute; background-color: #f9f9f9; min-width: 220px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); margin-left: 40px; text-align: left; } #right_side_dropdown_content a{ color: black; padding: 12px 16px; text-decoration: none; display: block; } #right_side_dropdown_content a:hover { background-color: #f1f1f1; } #mid_section{ margin: 5px; float: left; width: 320px; text-align: left; padding-left: 10px; padding-right: 10px; background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%); box-shadow: 1px 1px 2px 2px #888; } #mid_side_button{ background-color: aqua; padding-right: 90px; padding-left: 90px; font-size: 16px; border: 1px solid grey; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; box-shadow: 2px 2px 2px #888; } #mid_side_dropdown_content{ display: none; position:absolute; background-color: #f9f9f9; min-width: 220px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); margin-left: 40px; text-align: left; } #mid_side_dropdown_content a{ color: black; padding: 12px 16px; text-decoration: none; display: block; } #mid_dropdown_text{ color: white; text-align:center; } #mid_side_dropdown_content a:hover { background-color: #f1f1f1 } 

 <div id="mid_container"> <article id="mid_section"> <button id="mid_side_button">Make</button> <div id="mid_side_dropdown_content"> <p><a class="mid_dropdown_text" href="#">Link 1</a></p> <p><a class="mid_dropdown_text" href="#">Link 2</a></p> <p><a class="mid_dropdown_text" href="#">Link 3</a></p> </div> </article> <header id="vehicle_3_header"> <h3 class="compare_sections_titles">Vehicle 3</h3> </header> <article id="right_section"> <button id="right_side_button">Make</button> <div id="right_side_dropdown_content"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> </div> </article> </div> <script type="text/javascript" src="Test3Javascript.js"></script> </body> </html> 

Answer 3

When you click on right side since you have two window.load function its going for middle button function only. Write then code of right button below the middle button in same load function ie Single window.load function containing both button clicks event

window.onload = function () {
    "use strict";
    var midbutton = document.getElementById('mid_side_button');
    /* creating variable "midbutton" and calling the ID "mid_side_button" */
    var middropdowncontent = document.getElementById('mid_side_dropdown_content');
    /* same as above */
    document.onclick = function (e) {         /* creating function "e" */
        if (e.target === midbutton) {
            /* if variable "midbutton" is clicked, display "middropdowncontent" */
            middropdowncontent.style.display = 'block';
        }
    };

var rightbutton = document.getElementById('right_side_button');
    /* creating variable "midbutton" and calling the ID "mid_side_button" */
    var rightdropdowncontent = document.getElementById('right_side_dropdown_content');
    /* same as above */
    document.onclick = function (e) {         /* creating function "e" */
        if (e.target === rightbutton) {
            /* if variable "midbutton" is clicked, display "middropdowncontent" */
            rightdropdowncontent.style.display = 'block';
        }
    };
};

Answer 4

Do not assign different functions to window.onload. As you are assigning two functions the second one is working.

Check the following link

Add two functions to window.onload