Answered by:
How to execute a script at the click of a button?

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 fineI 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