locked
How to execute a script at the click of a button? RRS feed

  • Question

  • User1134142769 posted

    Project structure - see picture.
    How to make the text "test" move to the right after each button click?
    How to do this using elements:
    - <a>
    - <button> Start js </button>
    - <input type = "submit" value = "Start js" />
     
     
    ScriptTest1.js (preliminary example)

    var divxPos = 0;
    function runCode ()
    {
         element = document.getElementById ("testElement");
         element.style.left = divxPos ++ + 'px';
         setTimeout (() => runCode (element), 50);
    }
    

    Index.cshtml

    <body>
         <p id = "testElement" style = ""> test </p>
    </body>





    Update 1
      How to run a script with the click of a button if the script is located in a separate file?
    Condition:
    - the script is located in a separate file;


    Update 2
    View1.cshtml - not working
    Chrome -> F12 -> Sources - I do not see the file "ScriptTest2.js"
    Code

    @section Scripts
    {
         <script src = "~ / js / ScriptTest2.js"> </script>
    }
    
    <body>
         <button type = "button" id = "btnMove" onclick = "runCode ();"> Move it </button>
         <div id = "testElement" style = "padding-left: 1px;"> test </div>
    </body>

    When I enter the path with my hands, the file "ScriptTest2.js" is displayed in the prompts.

    View2.cshtml - works
    Chrome -> F12 -> Sources - I see the file "ScriptTest2.js"

    Code

    <script src = "~ / js / ScriptTest2.js"> </script>
    <body>
    <button type = "button" id = "btnMove" onclick = "runCode ();"> Move it </button>
    <div id = "testElement" style = "padding-left: 1px;"> test </div>
    </body>

    Question.
    Why when I use "@section Scripts" the script does not appear in "Chrome -> F12 -> Sources"?

    Friday, April 10, 2020 5:35 AM

Answers

  • User-18289217 posted
    <script>    
        var step = 5;
        function runCode() {        
            var testelement = document.getElementById("testElement");
            if (testelement != null) {
                setTimeout(function () {
                    testelement.style.paddingLeft = parseInt(testelement.style.paddingLeft) + step + 'px';
                }, 500);
            }
        }
    </script>
    <h1>Moving text to the right</h1>
    
    <button type="button" id="btnMove" onclick="runCode();">Move it</button>
    <div id="testElement" style="padding-left: 1px;">test</div>

    Text moves to the right just fine

    HTH

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 10, 2020 7:12 AM
  • User711641945 posted

    Hi frmasp897654,

    How to run a script with the click of a button if the script is located in a separate file?

    You need add reference in your view(Index.cshtml):

    @section Scripts
    {
        <script src="~/js/ScriptTest1.js"></script>
    }

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 10, 2020 8:14 AM
  • User711641945 posted

    Hi frmasp897654,

    That may because you do not use Layout in your cshtml.

    Reference:

    https://docs.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-3.1

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 13, 2020 1:40 AM

All replies

  • User-18289217 posted
    <script>    
        var step = 5;
        function runCode() {        
            var testelement = document.getElementById("testElement");
            if (testelement != null) {
                setTimeout(function () {
                    testelement.style.paddingLeft = parseInt(testelement.style.paddingLeft) + step + 'px';
                }, 500);
            }
        }
    </script>
    <h1>Moving text to the right</h1>
    
    <button type="button" id="btnMove" onclick="runCode();">Move it</button>
    <div id="testElement" style="padding-left: 1px;">test</div>

    Text moves to the right just fine

    HTH

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 10, 2020 7:12 AM
  • User1134142769 posted

    Text moves to the right just fine

    I updated the question. See Update 1

    Friday, April 10, 2020 8:02 AM
  • User711641945 posted

    Hi frmasp897654,

    How to run a script with the click of a button if the script is located in a separate file?

    You need add reference in your view(Index.cshtml):

    @section Scripts
    {
        <script src="~/js/ScriptTest1.js"></script>
    }

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 10, 2020 8:14 AM
  • User1134142769 posted

    You need add reference in your view(Index.cshtml):

    
    

    See "Update-2"

    Friday, April 10, 2020 9:14 AM
  • User711641945 posted

    Hi frmasp897654,

    That may because you do not use Layout in your cshtml.

    Reference:

    https://docs.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-3.1

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 13, 2020 1:40 AM
  • User-18289217 posted

    frmasp897654

    See "Update-2"
    

    You need to enable static files serving from within the Configure method e.g. 

    app.UseStaticFiles();

    HTH

    Monday, April 13, 2020 7:34 AM