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

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1134142769 posted

    Text moves to the right just fine

    I updated the question. See Update 1

    Friday, April 10, 2020 8:02 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    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
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1134142769 posted

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

    

    

    

    

    See "Update-2"
    
                        

                
    
                
                
    
                     
    
                        
    Friday, April 10, 2020 9:14 AM
    
                        
    
                            
                            
                            
    
                        
    
                    
    
                    
    
                        
    
                            
    
                            
    
                        
    

                    
    
                   
                
    
            
    
        
    
    
    •  
        
  • 
        
    
        
        
            
    

                
    
                    
    
                        Question
                    
    
                
    
                
                
    
                
                    Sign in to vote
                    
    0
    
                    

            
    
            
    
                
                            Sign in to vote
                
            
    

    
            
    
        
            
    
                
    
                    
    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
    
                        
    
                            
                            
                            
    
                        
    
                    
    
                    
    
                        
    
                            
    
                            
    
                        
    

                    
    
                   
                
    
            
    
        
    
    
    •  
        
  • 
        
    
        
        
            
    

                
    
                    
    
                        Question
                    
    
                
    
                
                
    
                
                    Sign in to vote
                    
    0
    
                    

            
    
            
    
                
                            Sign in to vote
                
            
    

    
            
    
        
            
    
                
    
                    
    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
    
                        
    
                            
                            
                            
    
                        
    
                    
    
                    
    
                        
    
                            
    
                            
    
                        
    

                    
    
                   
                
    
            
    
        
    
    
    •