How can I get JavaScript that is nested in my Help Center article to work?

5 コメント

  • Ifra Saqlain
    Community Moderator

    Hey Cesar, I have tried this and script code is working.

    Once you should go through this:

    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown

    Follow the steps below:

    Step 1: Add the CSS code on your stylesheet at the bottom.

    .dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
    }

    .dropdown {
    position: relative;
    display: inline-block;
    }

    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    }

    .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    }

    .dropdown a:hover {background-color: #ddd;}

    .show {display: block;}

     

    Step 2: Copy this code and paste on your article source code/HTML editor.

    <h2>Clickable Dropdown</h2>
    <div class="dropdown">
    <button class="dropbtn" onclick="myFunction()">Dropdown</button>
    <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a> <a href="#about">About</a>
    <a href="#contact">Contact</a>
    </div>
    <script>

    function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
    }

    window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
    }
    }
    }
    }
    </script>
    </div>

     

    After trying this, let me know the result :)

    Thanks

    Team

    0
  • Cesar

    Hello Ifra,

    I followed your steps exactly and that did not work.  I can only see the button and when I click it, it does nothing just like other examples I have tried.  The following example is more on the lines of what I am looking to work with.  It's a Cascading Dropdown: 

    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_cascading_dropdown

    Are there any settings that I might need to change?

    Thanks,

    Cesar

     

     

    0
  • Ifra Saqlain
    Community Moderator







     

    It's properly working when I tried your given link code.

    I added only this.

    <p>
    <script>
    var subjectObject = {
    "Front-end": {
    "HTML": ["Links", "Images", "Tables", "Lists"],
    "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
    "JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
    },
    "Back-end": {
    "PHP": ["Variables", "Strings", "Arrays"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
    }
    }
    window.onload = function() {
    var subjectSel = document.getElementById("subject");
    var topicSel = document.getElementById("topic");
    var chapterSel = document.getElementById("chapter");
    for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
    }
    subjectSel.onchange = function() {
        //empty Chapters- and Topics- dropdowns
        chapterSel.length = 1;
        topicSel.length = 1;
    //display correct values
    for (var y in subjectObject[this.value]) {
    topicSel.options[topicSel.options.length] = new Option(y, y);
    }
    }
    topicSel.onchange = function() {
        //empty Chapters dropdown
        chapterSel.length = 1;
    //display correct values
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
    chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
    }
    }
    </script>
    </p>
    <h1>Cascading Dropdown Example</h1>
    <form id="form1" name="form1" action="/action_page.php">
    Subjects:
    <select id="subject" name="subject">
    <option selected="selected" value="">Select subject</option>
    </select>
    <br>
    <br>
    Topics:
    <select id="topic" name="topic">
    <option selected="selected" value="">Please select subject first</option>
    </select>
    <br>
    <br>
    Chapters:
    <select id="chapter" name="chapter">
    <option selected="selected" value="">Please select topic first</option>
    </select>
    <br>
    <br>
    <input type="submit" value="Submit">
    </form>

     

    you can also try. Copy the given code above and paste as I have mentioned in the given screenshots.

    0
  • Cesar

    Ifra,

    Thank you very much.  It is working now.

    Cesar

    0
  • Ifra Saqlain
    Community Moderator

    Awesome!

    0

サインインしてコメントを残してください。

Powered by Zendesk