onclick to add another script is not working in Javascript

Question

I want to make a page where JavaScript will do something like:

When i click a link named "update" it will hide the div named "hide" run another script that is linked by JavaScript.

But when i click "Update" it just hide the div but doesn't run the script on mobile or Firefox. It's working on Google Chrome.

var myLink = document.getElementById('mylink');

myLink.onclick = function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "js/wa_lock.js.";
    document.getElementsByTagName("head")[0].appendChild(script);
    return false;
}

$("#mylink").click(function () {
    $("#hide").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hide">
    <h1 class="big">Update Required!</h1>
    <div class="wrapper">
        <img src="images/logo.png" class="logo" />

        <p class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

        <p class="txt">Nullam sit amet mauris pellentesque, fermentum lacus vitae, ultrices ligula. Praesent odio dui, volutpat id faucibus non, facilisis eget lacus.</p>

        <img src="images/msg.png" class="logo" />

        <p class="now">facilisis eget lacus <span id="timer"></span> Vivamus hendrerit velit purus</p>

        <div class="bottom">
            <p class="rules">1.Curabitur quis dolor ligula. Nullam erat neque, ornare nec massa quis, blandit dignissim tortor. Sed velit lacus, tempus quis lorem sed, efficitur mattis justo.</p>
            <p class="rules">2. Donec mattis, nibh eu porttitor lobortis, erat neque placerat orci, ac egestas velit arcu eu augue. Morbi viverra sapien in ultricies pulvinar.</p>
            <a href="#" id="mylink">Update</a>                    
        </div>
    </div>
</div>

It would probably be better to include wa_lock.js in the page directly, but encapsulate the logic in it within a function which you can call when the click event happens. — Rory McCrossan
– Rory McCrossan, Commented Oct 7, 2015 at 10:46

Lajos Arpad · Accepted Answer · 2015-10-07 11:12:00Z

1

You are hiding #hide in the main script. Here:

script.src = "js/wa_lock.js.";

it seems that you unnecessarily have a point at the end of the path. Maybe this would be better:

script.src = "js/wa_lock.js";

Also, it is not clear what wa-lock.js is doing. Maybe it is loading later than the moment you hide, so you could consider adding the hiding part to the wa_lock.js file. Finally, you should check your console to see whether there are any js errors and the networks tab to check whether the script was loaded correctly.

answered Oct 7, 2015 at 11:12

Lajos Arpad

80.4k42 gold badges123 silver badges234 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bibvranto Pothik Over a year ago

wa_lock.js file will be load while click update link and the other content will hide at the same time. I have also tried by adding the hiding part into the wa_lock.js file but still it doesn't work. also i want to say that this functions are running perfectly on Google Chrome but not working on other browsers

Collectives™ on Stack Overflow

onclick to add another script is not working in Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related