Javascript not working on my MVC project
I'm learning front end tutorials at the moment so I'm totally new to designing websites.
_Layout.cshtml:
Home/Index.cshtml:
The Sign Up button should display account creation fields with a little animation but it doesn't move. Added css file
<!DOCTYPE html>
<html lang="en">
stuff here to @RenderBody()
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</html>
<!DOCTYPE html>
<html lang="en">
stuff here to @RenderBody()
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</html>
@{
ViewData["Title"] = "Home Page";
}
<div class="form-container sign-up">
<form>
<h1>Create Account</h1>
<div class="social-icons">
icons here
</div>
<span>stuff here</span>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in">
<form>
<h1>Sign In</h1>
<div class="social-icons">
icons here
</div>
<span>stuff here</span>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<a href="#">stuff here</a>
<button>Sign In</button>
</form>
</div>
<div class="toggle-container">
<div class="toggle">
<div class="toggle-panel toggle-left">
<h1>Welcome Back!</h1>
<p>stuff here</p>
<button class="hidden" id="login">Sign In</button>
</div>
<div class="toggle-panel toggle-right">
<h1>Hello, Friend!</h1>
<p>stuff here</p>
<button class="hidden" id="register">Sign Up</button>
</div>
</div>
</div>
<script src="~/js/site.js"></script>
@{
ViewData["Title"] = "Home Page";
}
<div class="form-container sign-up">
<form>
<h1>Create Account</h1>
<div class="social-icons">
icons here
</div>
<span>stuff here</span>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in">
<form>
<h1>Sign In</h1>
<div class="social-icons">
icons here
</div>
<span>stuff here</span>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<a href="#">stuff here</a>
<button>Sign In</button>
</form>
</div>
<div class="toggle-container">
<div class="toggle">
<div class="toggle-panel toggle-left">
<h1>Welcome Back!</h1>
<p>stuff here</p>
<button class="hidden" id="login">Sign In</button>
</div>
<div class="toggle-panel toggle-right">
<h1>Hello, Friend!</h1>
<p>stuff here</p>
<button class="hidden" id="register">Sign Up</button>
</div>
</div>
</div>
<script src="~/js/site.js"></script>
2 Replies
wwwroot/js/site.js:
const container = document.getElementById('container');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');
registerBtn.addEventListener('click', () => {
container.classList.add("active");
});
loginBtn.addEventListener('click', () => {
container.classList.remove("active");
});
const container = document.getElementById('container');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');
registerBtn.addEventListener('click', () => {
container.classList.add("active");
});
loginBtn.addEventListener('click', () => {
container.classList.remove("active");
});
Any errors in the console?
Does the file actually get loaded? Check the network panel
Both in the browser devtools, F12 to open them