Javascript click not working as desired

gomesh munda Published at Dev

gomesh munda

I am trying to implement something like what is pictured below; when Divs looking like buttons are clicked, it would show details about them. I am using inline Javascript as well as an external JavaScript file. My problem is that when I click on the first div, it shows detailed information about it. But when I click the other divs nothing happens.

My HTML code is:

<html>
<head>
<title>Crash Test</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
    <script src="javascript/functions.js" type="text/javascript"></script>

    </head>
    <body>
        <fieldset>
            <legend>Mobile Phones</legend>
            <table width="100%">
                <tbody>
                    <tr>
                        <td>
                            <script language="javascript">
                                var secArray = new Array();
                                secArray = ["Asus","HTC","Apple","Samsung","Nokia"];

                                for(var secCnt=1;secCnt<=secArray.length;secCnt++){
                                    document.write('<div class="allSections currentSectionSelected" id="s">');
                                    document.write('<div href="javascript:void(0);" class="tooltip tooltipSelected">');
                                    document.write('<div style="text-overflow:ellipsis;width:92%;overflow:hidden;white-space:nowrap; padding:5px;font-weight: bold;" onclick="javascript:setSecName('+secCnt+',secArray);">');
                                    document.write(secArray[secCnt-1]);
                                    document.write('</div>');
                                    document.write('</div>');
                                    document.write('</div>');
                                }
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <script type="text/javascript">
                                for(var secCnt=1;secCnt<=secArray.length;secCnt++){
                                    if(secCnt == CurrentSection){
                                        document.write('<div id="viewSection'+secCnt+'" style="display:block">You are viewing all about <b>'+secArray[secCnt-1]+'</b> mobile phone: <br><br>');
                                    }
                                    else{
                                        document.write('<div id="viewSection'+secCnt+'" style="display:none;">You are viewing all about <b>'+secArray[secCnt-1]+'</b> mobile phone: <br><br>');
                                    }
                                }
                            </script>

                        </td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
    </body>
    </html>

And my external javascript file code is:

var CurrentSection =1;

function setSecName(sectioncount,sa){
    CurrentSection=sectioncount;

    load_details(sa);
}

function load_details(sa){
    var secArray =sa;
    for(var secCnt=1;secCnt<=secArray.length;secCnt++){
        if(secCnt == CurrentSection){
            document.getElementById('viewSection'+secCnt).style.display = "block";
        }else{
            document.getElementById('viewSection'+secCnt).style.display = "none";
        }
    }
}

I want to achieve the above functionality using Javascript only.Please help me. Thanks in advance.

ent

dfsq

The problem is that you left detail information div elements unclosed. Corrected code:

for (var secCnt = 1; secCnt <= secArray.length; secCnt++) {
    if (secCnt == CurrentSection) {
        document.write('<div id="viewSection' + secCnt + '" style="display:block">You are viewing all about <b>' + secArray[secCnt - 1] + '</b> mobile phone: <br><br></div>');
    } else {
        document.write('<div id="viewSection' + secCnt + '" style="display:none;">You are viewing all about <b>' + secArray[secCnt - 1] + '</b> mobile phone: <br><br></div>');
    }
}

Note that I added </div> in above code.

Also document.write is not the best way to render and display information. You should probably make use of some static elements or create elements dynamically with document.createElement and appendChild methods.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-16

Comments

0 comments

From Dev

Related Related

Article

Javascript click not working as desired

Javascript click not working as desired

javascript addEventlistener "click" not working

JavaScript 'click' not working

JavaScript .click() not working in IE

JavaScript Audio Click Not Working

JavaScript : .Click not working (PHP)

auto click not working in javascript

if statement in JavaScript game not working as desired to allow for collision detection

Why trigger click not working in javascript

Cloned element on click not working Javascript

HTML/Javascript click counter not working

Javascript Ctrl + Click not working in Firefox

Javascript scroll on anchor click not working

addEventListener not working in Javascript but jQuery Click is working

query not working with desired output

Javascript .click() function completes desired action partially whereas it works perfectly when clicking manually

HTML,javascript: on button click validation not working

Javascript - Code stops working after click on button

Javascript/jQuery Change CSS On Click Not Working

Javascript Event Listener on click not working as expected

javascript click function not working on form generated in php

Javascript delay after click, set timeout not working

Why is my javascript button click not working?

javascript click event not working in div onclick

Single click and Double click on the same element, not working; Javascript

Making a Tip Calculator in javascript where users can enter their desired tip% and calculate button isn't working

Sendmail not working as desired in bash script

_vsnwprintf_s not working as desired

Threading lock in python not working as desired

Sendmail not working as desired in bash script