"i dont know what the problem is in my code so i need help please. this is the js:"
`const bar = document.getElementById('bar');
const close = document.querySelector('close');
const nav = document.getElementById('navbar');
if (bar) {
bar.addEventListener('click', () => {
nav.classList.add('active');
})
}
if (close) {
close.addEventListener('click', () => {
nav.classList.remove('active');
})
}`
"for the mobile sidebar and here is the html and js for the popup:"
`
</div>
<div class="imgBx">
<img src="C:/Users/Wassim Malas/Downloads/Screenshot_20230128_091355-removebg-preview.png">
</div>
<div class="content">
<div>
<h3>Subscribe!</h3>
<h2>10<sup>%</sup><span>Off</span></h2>
<p>When you subscribe to our newsletter</p>
<div class='form action="https://formsubmit.co/houseofibnsina#outlook.com" method="POST"'>
<input type="hidden" name="_next" value="https://houseofibnsina.com/thanks">
<input type="email" placeholder="Email Address" name="email" required>
<button class="normal" type="submit">Send</button>
</form>
</div>
</div>
</div>
<script>
const popup = document.querySelector('.popup');
const closeit = document.querySelector(".closeit");
window.onload = function(){
setTimeout(function(){
popup.style.display = "block";
}, 1500)
}
closeit.addEventListener('click', () => {
popup.style.display = "none";
})
</script>`
"i am trying to make a popup on my website and have an x in the corner to close it but there is also an x in the mobile version of my website. so when i try to press the x in my mobile version i get this error message <Failed to load resource: net::ERR_FILE_NOT_FOUND> and i dont know why"
Related
I need the following - if LABEL value is Admin button "CHANGE" must be disabled without possibility to SUBMIT and if the label value is any other then SUBMIT is possible and button is enabled. I made the following code, but for some reason script work only for the second click, for the first click SUBMIT still works
<h3>ACCESS RIGHTS MANAGEMENT</h3>
<h5 style="color: gray"> User selected:</h5>
<h5 style="color: red">{{ context.user_name }}</h5>
<h5 style="color: gray"> Current role:</h5>
<h5 id="roll" style="color: red">{{ context.user_role }}</h5>
<h6 style="color: black">List of roles</h5>
<h7 style="color: grey">
{% for role in context.all_roles %}
<label>{{ role.get('name') }}</label>
{% endfor %}
</h7>
<form method="post" action="/auth/editor/ {{ context.user_id }}"
class="row mt-3 text- center">
<div class="col-auto">
<div class="form-floating my-box">
<input type="text" class="form-control" id="floatingInput" name="role"
placeholder="Input a new role" required>
<label for="floatingInput">New Role:</label>
</div>
</div>
<div class="col-auto">
<input id="button" onclick='disable()' display="false" type="submit"
value="CHANGE" style="height: 58px" class="btn btn-sm btn-primary"/>
<script type = "text/javascript">
function disable () {
let adm = document.getElementById("roll").textContent;
if (adm == "Admin") {
const button = document.querySelector('#button');
const disableButton = () => {
button.disabled = true;
};
button.addEventListener('click', disableButton);
document.getElementById('warning').innerHTML = 'WARNING: You are cannot
edit Admin';
} else {
const button = document.querySelector('#button');
const disableButton = () => {
button.disabled = false;
};
}
}
</script>
</div>
<div class="col-auto">
<label id="warning" style="color: red"></label>
</div>
</form>
THanks!
You are running your disable function only after the first click, you could try running it on page load to evaluate if it's going to be disabled on load.
For that run the function after declaring it:
function disable() {
let adm = document.getElementById("roll").textContent;
if (adm == "Admin") {
const button = document.querySelector('#button');
const disableButton = () => {
button.disabled = true;
};
button.addEventListener('click', disableButton);
document.getElementById('warning').innerHTML = 'WARNING: You are cannot edit Admin';
} else {
const button = document.querySelector('#button');
const disableButton = () => {
button.disabled = false;
};
}
}
// Add this
disable();
I went through all similar questions but none of them seem to help me with what I want to do. Maybe I am just missing something and if there is a question out there that could help could you please point me to that question and I will delete this. Anywhoo...
I am trying to create a function that when I click a link on the bottom of the login form (Need an account? Register) it will hide the Login form and show the Registration form with a link on the bottom of the Registration form (Have an account? Login) to go back to the Login form without refreshing the page or going to a new html page.
I have tried multiple things... I want it to look like this... I have set the display to none for my registration form and the display for my login form to block.
example of login to registration and back
This is two of the codes I have tried.
Example one that seems right but is wrong:
function showAndHide() {
const loginBtn = document.getElementById('loginbtn');
const signupBtn = document.getElementById('signupbtn');
const regForm = document.getElementById('register');
const logForm = document.getElementById('login');
if (regForm.style.display == 'none') {
regForm.style.display = 'block';
logForm.style.display = 'none';
} else {
logForm.style.display = 'block';
regForm.style.display = 'none';
}
loginBtn.addEventListener('onclick', function() {
showAndHide(loginBtn);
});
signupBtn.addEventListener('onclick', function() {
showAndHide(signupBtn);
});
Example two that seems right but is wrong:
function showAndHide() {
const regForm = document.getElementById('register');
const logForm = document.getElementById('login');
if (regForm.style.display = 'none') {
regForm.style.display = 'block';
logForm.style.display = 'none';
} else {
logForm.style.display = 'none';
regForm.style.display = 'block';
}
}
My Html:
<body>
<section id="login">
<h2>Login</h2>
<form id="login-form" method="post" novalidate>
<div>
<label for="logfield">Email:</label>
<input type="email" name="logfield" id="logfield" required>
</div>
<div>
<label for="pw">Password:</label>
<input type="password" name="pw" id="pw" size="15" required>
</div>
<div>
<button type="submit">LOGIN</button>
</div>
<div>
Need an account? Register
</div>
</form>
</section>
<section id="register">
<h2>Register</h2>
<form id="register-form" method="post" no validate>
<div>
<label for="email-field2">Email:</label>
<input type="email" name="email-field2" id="email-field2" required>
</div>
<div>
<label for="pw2">Password:</label>
<input type="password" name="pw2" id="pw2" size="15" required>
</div>
<div>
<label for="pw3">Repeat Password:</label>
<input type="password" name="pw3" id="pw3" size="15" required>
</div>
<div>
<button type="submit">REGISTER</button>
</div>
<div>
Have an account? Log in
</div>
</form>
</section>
</body>
I can't seem to make an alert work properly in ejs. Basically I want an alert to appear when the page is loaded and visible but I just can't make it happen. I've dug through Stack and tried different many things with JS and jQuery but all they do is alert before page is visible and I have a blank white screen with an alert and after OK is clicked the page becomes visible. I'm testing it in Opera.
Maybe it's not just scripts and I am missing something?
PS. window.onload function seems to work fine with an ordinary html file but alert shows before some of css is loaded. Just testing. Found it peculiar.
PS. Okay, now it seems really strange. Apparently, the page actually loads but I don't see it refresh. If I refresh the page, I see the alert but the page is blank. But if I minimize the browser and then put it back on, the page is there. What is going on? Video
<%- include('partials/header'); -%>
<body>
<script>
window.onload = () =>{
alert("fully loaded");
}
</script>
<div id="formDiv" class="flexbox-container">
<form action="/addword" method="post" class="ml-auto mr-auto mt-auto mb-auto" id="wordaddFrom" required>
<div class="form-group">
<input type="text" class="form-control" id="wordInput" name="wordInput" placeholder="Word" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="defInput" name="defInput" placeholder="Definition" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="exInput" name="exInput" placeholder="Example" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="defInput" name="titleInput" placeholder="Title" required>
</div>
<div class="form-group">
<select class="form-control" name=genreInput placeholder="Genre">
<option value="" disabled selected hidden>Genre</option>
<option>Games</option>
<option>Movies</option>
<option>Books</option>
</select>
</div>
<ul class="list-inline">
<li class="list-inline-item"><button type="submit" class="btn btn-primary">Submit</button></li>
</ul>
</form>
</div>
</body>
<%- include('partials/footer'); -%>
app.get("/addword", function(req, res) {
res.render("addword");
});
app.post("/addword", function(req, res){
var newWord = new Dicword ({
word: req.body.wordInput,
definition: req.body.defInput,
title: req.body.titleInput,
genre: req.body.genreInput,
example: req.body.exInput
});
Dicword.exists({word: req.body.wordInput}, (function(err, existingDoc){
if (existingDoc === null) {
newWord.save(function(err){
if (!err){
console.log("add succ");
res.render("addwordSUCC");
}
else {console.log(err);}
});
} else {
let exists = "This word already exists"
res.render("addwordFAIL", {exists: exists});
}
}));
The window.onload function only run when the page is loaded and setTimeout function will wait the css is loaded.
You can try
window.onload = () =>{
setTimeout(function() {
alert("fully loaded");
}, 500);
}
or
let everythingLoaded = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(everythingLoaded);
init(); // this is the function that gets called when everything is loaded
}
}, 10);
function init() {
alert('Hello World');
}
or
document.addEventListener('readystatechange', event => {
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
init();
}
})
function init() {
alert('Hello World');
}
or In Opera and Safari is same as before but Only change is I nested the alert code in setTimeout function.
document.addEventListener('readystatechange', event => {
// When window loaded ( external resources are loaded too- `css`,`src`, etc...)
if (event.target.readyState === "complete") {
init();
}
})
function init() {
setTimeout(function() {
alert('Hello World');
}, 100);
}
Solution Video
What the script does is hide the input element and show the "thanks message".
But prior to this I need it to validate if input emailfield is validated, and show the "thanks message" only if that happens.
Thanks!
var nextStep = document.querySelector('#nextStep');
nextStep.addEventListener('click', function(e) {
e.preventDefault()
// Hide first view
document.getElementById('my_form').style.display = 'none';
// Show thank you message element
document.getElementById('thank_you').style.display = 'block';
});
<form class="row row-cols-lg-auto g-2 align-items-center justify-content-end">
<div class="col-12" id="my_form">
<input id="emailfield" type="email" class="form-control" placeholder="Ingresa tu Email" required="required">
</div>
<div class="col-12" id="thank_you" style="display: none;">
Gracias por subscribirse!
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary-soft m-0" name="subscribirse" id="nextStep">Subscribirse</button>
</div>
</form>
var nextStep = document.querySelector('#nextStep');
nextStep.addEventListener('click', function (e) {
e.preventDefault()
let inputEmail = document.querySelector('#emailfield')
if (/.*\#.*\..*/.test(inputEmail.value)) {
// validation passed
// Hide first view
document.getElementById('my_form').style.display = 'none';
// Show thank you message element
document.getElementById('thank_you').style.display = 'block';
} else {
// validation not passed
}
});
Instead of this regexp you can use any that you want
I am trying to implement a confirmation message appearing in a popup when a user clicks on a button on a web page built on .NET Core. Then the user can either accept or cancel that message, if they decline then I need them to stay on the same page.
My code:
<div class="row">
<div class="col-md-12">
#Html.DropDownListFor(m => m.For, Model.Sources, new { #id = "ddl" })
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
<input type="file" name="csvFile" />
</p>
<p>
<button type="submit" class="btn btn-primary" onclick="DisplayConfirmation()">Upload File</button>
</p>
</div>
</div>
<script type="text/javascript">
function DisplayConfirmation() {
var confirm_value = document.getElementById("ddl");
if (confirm_value.value == " Data") {
if (window.confirm("Do you want default package?")) {
}
}
}
</script>
I have had success using this approach taking the confirmation and putting it in a boolean variable first, skipping 'window':
<script type="text/javascript">
function DisplayConfirmation() {
var confirm_value = document.getElementById("ddl");
if (confirm_value.value == " Data") {
var confirmed = confirm("Do you want default package?");
if (confirmed) {
}
}
}
</script>
If the confirm returns false, just let the function run out and nothing will happen.