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](http://stackoverflow.com/questions/7789521/how-to-link-external-javascript-file-onclick-of-button) — vp_arth, Mar 04 '17 at 15:43

Dan_ · Answer 1 · 2017-03-04T16:08:56.800

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 04 '17 at 16:08

answered Mar 04 '17 at 15:42

Dan_

1,235
11
20

1

Could you explain the difference between using **div** and **button** for this task? – Alexey Mar 04 '17 at 15:45
@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 ` – Dan_ Mar 04 '17 at 15:49
Maybe. But are there any benefits of using **div**? Google's main page doesn't has **button** elements as I see, for example – Alexey Mar 04 '17 at 15:55
@Alexey Not really any benefits. If you inspect their buttons though, they are elements on a form. – Dan_ Mar 04 '17 at 15:58
heey so I tried this too, but nothing appears, the js scripts are not running apparently ... – Xibition Mar 04 '17 at 15:59
@Xibition So I added a JSFiddle example, just imagine that the 3 scriptFunc's are in their own files which are included at the end of the html document. 'Val' holds the text that is in the text box at the time the button is pressed, this is passed through to each script for use. – Dan_ Mar 04 '17 at 16:10
You can add more validation to only call scripts if 'Val' isn't empty or whatever, tailor it to your need. – Dan_ Mar 04 '17 at 16:11
so I get the value but still can't run the scripts... i don't know why – Xibition Mar 04 '17 at 16:22
@Xibition What do the scripts do? Can you create a JSFiddle with them all in the one JS box as separate functions? – Dan_ Mar 05 '17 at 12:19
1

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 ! http://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework – Xibition Mar 05 '17 at 13:21

Larce · Answer 2 · 2017-03-04T16:09:37.860

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 04 '17 at 16:09

answered Mar 04 '17 at 15:44

Larce

841
8
17

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 – Alexey Mar 04 '17 at 15:47
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 – Xibition Mar 04 '17 at 15:50
@Alexey What are you talking about? Where do you see `node.js` here? See https://api.jquery.com/jquery.getscript/ – Tarwirdur Turon Mar 04 '17 at 15:50
@TarwirdurTuron, it was a joke about node – Alexey Mar 04 '17 at 15:57
I changed the code to check if the input field is empty and to get the value. Also done via jQuery. – Larce Mar 04 '17 at 15:59
I click on the button nothing happens, also nothing shows on the console neither... – Xibition Mar 04 '17 at 16:02
PS : i am using Electron to build the App, does it accept jQuery ? it's like it doesnt execute any jQuery code – Xibition Mar 04 '17 at 16:09
Do you view you HTML file just in the browser or do you use a web server? jQuery .getScript will not work if you just view it in your browser. It should work with Electron when you have installed it via npm. You can change the link of jquery in the header to the local jquery.js file. – Larce Mar 04 '17 at 16:11
Electron uses Chromium so it's like a web browser ? not sure – Xibition Mar 04 '17 at 16:13
Yes it is a web browser and should work with jquery. I changed it in my code to use the cdn. I don't know if that works in Electron, so i suggest you to change it back to the /node_modules path (Like it was at the beginning). – Larce Mar 04 '17 at 16:16
thank youu found the solution here http://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework – Xibition Mar 05 '17 at 13:22

score 0 · Answer 3 · answered Mar 04 '17 at 16:13

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>

Execute javascript scripts after onclick and getvalue

3 Answers3