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 = "position: absolute"> 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"?
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
10 Points
29 Posts
How to execute a script at the click of a button?
Apr 10, 2020 05:35 AM|frmasp897654|LINK
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
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
Question.
Why when I use "@section Scripts" the script does not appear in "Chrome -> F12 -> Sources"?
Contributor
4232 Points
1147 Posts
Re: How to execute a script at the click of a button?
Apr 10, 2020 07:12 AM|Kulrom|LINK
<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
My website: ASP.NET Custom Software Development
Member
10 Points
29 Posts
Re: How to execute a script at the click of a button?
Apr 10, 2020 08:02 AM|frmasp897654|LINK
I updated the question. See Update 1
Contributor
2690 Points
874 Posts
Re: How to execute a script at the click of a button?
Apr 10, 2020 08:14 AM|Rena Ni|LINK
Hi frmasp897654,
You need add reference in your view(Index.cshtml):
@section Scripts { <script src="~/js/ScriptTest1.js"></script> }Best Regards,
Rena
Member
10 Points
29 Posts
Re: How to execute a script at the click of a button?
Apr 10, 2020 09:14 AM|frmasp897654|LINK
See "Update-2"
Contributor
2690 Points
874 Posts
Re: How to execute a script at the click of a button?
Apr 13, 2020 01:40 AM|Rena Ni|LINK
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
Contributor
4232 Points
1147 Posts
Re: How to execute a script at the click of a button?
Apr 13, 2020 07:34 AM|Kulrom|LINK
You need to enable static files serving from within the Configure method e.g.
HTH
My website: ASP.NET Custom Software Development