Execute javascript scripts after onclick and getvalue

Question

I wanted to modify something in my code and don't really know how to make this work... my code is kinda huge so I am going to explain what I want with an exemple :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="stylesheets/application.css">


    </head>

    <body>
      <label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
      <div id="button">OK</div>
        <div id="nfa"></div>

        <script src="script1.js"></script>
        <script src="script2.js"></script>
        <script src="script3.js"></script>

    </body>
</html>

So this is my HTML code, so what I want to do is NOT execute these 3 scripts until the user enters a value in the text input and clicks on OK. That value will be used in the js files, so i have to get the value after I click OK.

Can someone explain how this has to work ?

EDIT : problem was with jQuery that was not executing on Electron, solution : http://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework

Possible duplicate of How to link external javascript file onclick of button — vp_arth
– vp_arth, Commented Mar 4, 2017 at 15:43

Dan_ · Accepted Answer · 2017-03-04 16:08:56Z

2

For starters I would suggest changing; <div id="button">OK</div> to <button id="button">OK</button>.

I would then suggest to put each of those scripts into functions instead, then you can use the 'onClick' event from the button attribute as follows;

<button id="button" onClick="s1Func();s2Func();s3Func();">OK</button>

A better way would be to have one function call 'init' or something appropriate that then calls the 3 scripts/functions and have your buttons onClick even call that one initialization function.

JSFiddle Example: https://jsfiddle.net/JokerDan/h7htk9Lp/

edited Mar 4, 2017 at 16:08

answered Mar 4, 2017 at 15:42

Dan_

1,24511 silver badges21 bronze badges

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

10 Comments

Alexey Over a year ago

Could you explain the difference between using div and button for this task?

Dan_ Over a year ago

@Alexey For web development as with all languages there are some standards that aren't strictly enforced, but make more sense/are more appropriate in certain use cases. The idea is to use the closest element to what you want, so if you want a button, use a button element. In terms of clickable elements in general, the <button> or <a> elements are those that should be chosen, rather than having a <div> or <span> styled and have javascript attached to act as a button or anchor.

Alexey Over a year ago

Maybe. But are there any benefits of using div? Google's main page doesn't has button elements as I see, for example

Dan_ Over a year ago

@Alexey Not really any benefits. If you inspect their buttons though, they are <input> elements on a form.

Xibition Over a year ago

heey I just found out what was the problem, jQuery is apparently not included at first so I had to add a script to execute the jQuery ! ourcodeworld.com/articles/read/202/…

|

Larce · Accepted Answer · 2017-03-04 16:09:37Z

2

I would recommend you to load the scripts dynamically after you click on the button. This can be done via jQuery: https://api.jquery.com/jquery.getscript/

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="stylesheets/application.css">
        <title>NFA2DFA</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
      <label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
      <div id="button" onclick="loadScripts();">OK</div>
        <div id="nfa"></div>
        <script>
            function loadScripts() {
                // Is the input empty?
                var value = $("#reg_expr").val();
                if (value.length != 0) {
                    // Loads and executes the scripts
                    console.log(value); // Displays the value of the input field
                    $.getScript("script1.js");
                    $.getScript("script2.js");
                    $.getScript("script3.js");
                }
            }
        </script>
    </body>
</html>

edited Mar 4, 2017 at 16:09

answered Mar 4, 2017 at 15:44

Larce

8518 silver badges17 bronze badges

11 Comments

Alexey Over a year ago

No way, man)) and what's next? You will advice to install node.js to run these scripts? It's too complicated an can be done much easier

Xibition Over a year ago

my application is in nodejs, I have a question though, I don;t want it to work also if there is no input ... and i want to get the value of the input

Tarwirdur Turon Over a year ago

@Alexey What are you talking about? Where do you see node.js here? See api.jquery.com/jquery.getscript

Alexey Over a year ago

@TarwirdurTuron, it was a joke about node

Larce Over a year ago

I changed the code to check if the input field is empty and to get the value. Also done via jQuery.

|

Simone Boccato · Accepted Answer · 2017-03-04 16:13:38Z

0

You can use a button tag instead of input tag. I suggest you to use onClick event like this:

 <button type="button" onclick="yourFunction()">Click me</button>

When the users click the button yourFunction() is call.

The result is this:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="stylesheets/application.css">
        <script src="script1.js"></script>
        <script src="script2.js"></script>
        <script src="script3.js"></script>

    </head>

    <body>
      <label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
      <button type="button" onclick="yourFunction()">Click me</button>

    </body>
</html>

answered Mar 4, 2017 at 16:13

Simone Boccato

1891 silver badge15 bronze badges

Collectives™ on Stack Overflow

Execute javascript scripts after onclick and getvalue

3 Answers 3

10 Comments

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related