Links not working in Mozilla - javascript

This code works in Internet Explorer and other browsers but does not work in Mozilla Firefox.
The code prompts the user to enter a password and if the correct password is entered the password protected page should open.
In Mozilla it displays a URL error or blank tab.
I have looked everywhere for an answer to this and tried using clickable links as opposed to a pop up window and that still does not work in Mozilla.
Pop up blocker is disabled, and I have tried safe mode in Mozilla with the same results.
I am also prompted by IE that scripts and ActiveX are restricted and have to enable before it can run.
Thanks in advance.
Code:
<!DOCTYPE html>
<head>
<title>PasswordProtectedPage</title>
</head>
<body>
<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Please enter the password:',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "love") {
window.open('/Users/Madeleine/Documents/moandmaddieindex.html');
break;
}
testV += 1;
var pass1 =
prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<!--Password prompt-->
<CENTER>
<FORM>
<input type="button" value="Enter Protected Area" onClick="passWord()">
</FORM>
</CENTER>
</body>
</html>
Here is how the page runs in IE:
Screenshot

Related

How to stop page from auto refreshing with JavaScript?

I am quite new to web dev and currently, I work on a JS course. I have a problem with the automatic page refreshing that happens in Chrome and Safari also.
I have read that this refreshing can be caused by input submission in HTML but this problem occurs even when I do not use any type of button. In the code below, I tried to make a counter of the best score of all games when I guess the numbers, but I cannot record this score because my browser randomly refreshes my localhost and therefore all data is lost. As I said this problem occurs even when I do not use any type of submitting in my code (page randomly refreshes itself).
I have tried to disable adblocker in my browsers, but this did not help. Also, I tried to use window.stop() at the start and end of the code, but this did not seem desirable because safari always showed that it is still loading the page. Also, I have read that this can be caused by some sort of RAM optimization in the browser and therefore I tried to execute the code with only one tab open but this did not help either. I use Live Server extension with VS Code and therefore I do not run live server with node.js through terminal.
Because this problem occurs in multiple browsers I figured that it can be solved by some additional code in JS for example. Do you have any idea how could I solve this problem? I have run out of ideas at this point.
My Code:
"use strict";
let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highScore = 0;
document.querySelector(".check").addEventListener("click", function() {
const guess = Number(document.querySelector(".guess").value);
if (!guess) {
// When there is no input
document.querySelector(".message").textContent = "No Number";
} else if (secretNumber === guess) {
// When correct guess
document.querySelector(".number").textContent = secretNumber;
document.querySelector(".message").textContent = "Correct guess! 🎉";
document.querySelector("body").style.backgroundColor = "#228B22";
if (score > highScore) {
highScore = score;
document.querySelector(".highscore").textContent = highScore;
}
} else if (secretNumber < guess) {
// When guess is too high
if (score > 1) {
score--;
document.querySelector(".score").textContent = score;
document.querySelector(".message").textContent = "Too High";
} else {
document.querySelector(".score").textContent = 0;
document.querySelector(".message").textContent = "You lost the game.";
}
} else {
// When guess is too low
if (score > 1) {
score--;
document.querySelector(".score").textContent = score;
document.querySelector(".message").textContent = "Too Low";
} else {
document.querySelector(".score").textContent = 0;
document.querySelector(".message").textContent = "You lost the game.";
}
}
// Reseting Game With Button
document.querySelector(".again").addEventListener("click", function() {
score = 20;
document.querySelector(".score").textContent = score;
secretNumber = Math.trunc(Math.random() * 20) + 1;
document.querySelector(".message").textContent = "Start Guessing";
document.querySelector(".number").textContent = "?";
document.querySelector("body").style.backgroundColor = "#222222";
document.querySelector(".guess").value = "";
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Guess My Number!</title>
</head>
<body>
<header>
<h1>Guess My Number!</h1>
<p class="between">(Between 1 and 20)</p>
<button class="btn again">Again!</button>
<div class="number">?</div>
</header>
<main>
<section class="left">
<input type="number" class="guess" />
<button class="btn check">Check!</button>
</section>
<section class="right">
<p class="message">Start guessing...</p>
<p class="label-score">💯 Score: <span class="score">20</span></p>
<p class="label-highscore">
🥇 Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Currently, I use this Chrome version "Version 92.0.4515.159 (Official Build) (arm64)" and this Safari version "Version 14.1.2 (16611.3.10.1.3)" with MacBook Air(2020) with M1 chip and 16 GB of RAM.
I use Live Server extension with VS Code…
This extension is designed to refresh your browser every time your file is changed (in some cases using the file buffer in VSCode). Disable the extension if you don't want this behavior.
Apparently, there is a problem with refreshing browser windows with localhost when loading code from external SSD. I disabled the Live Server extension in VS Code and installed node.js and run the live server from there but this did not help either. When I moved my files from the external SSD into the machine everything worked correctly.

IE11 submit not recognizing elements

Firstly, I am sorry to anyone that finds this post more than a little trivial, but I am currently sratching my hair out on, at first sight, is a form posting matter.
I am developing an ASP.NET MVC 6 application which is running perfectly in Chrome and Edge, but recently, I was informed that it would also need to be able to run on IE11.
My issue is when a submit the form.
$("#js-form").on("submit", function (e) {
document.getElementById("DefinitionID-error").style.visibility = "hidden";
document.getElementById("DefinitionID-error").textContent = "<some text>";
document.getElementById("DefinitionID-error").style.visibility = "visible";
}
The code appears to execute in the IE11 debugger, with no error messages, but on screen the original text held in #DefinitionID-error does not change.
The version of IE11 I am using, is the super special version that ships with Windows 10.
Other code I have tried include:
$("#js-form").on("submit", function (e) {
$("#DefinitionID-error").hide();
$("#DefinitionID-error").text("<some text>");
$("#DefinitionID-error").show();
}
$("#js-form").on("submit", function (e) {
$("#DefinitionID-error").html("<span id='DefinitionID-error'>Some text</span>");
}
$("#js-form").on("submit", function (e) {
document.querySelector("#DefinitionID-error").textContent = "<some text>";
}
$("#js-form").on("submit", function (e) {
document.querySelector("#DefinitionID-error").innerHTML = "<span id='DefinitionID-error'>some text</span>";
}
All of these work in Chrome and funnily enough Edge, but not in IE11.
NEW Example that also does not work
$("#js-form").on("submit", function (e) {
$("#DefinitionID-error").hide();
$("#DefinitionID-error").text("Some text");
$("#DefinitionID-error").show();
}
UPDATE
If I take the jQuery code, or the javascript code and run it in the debugger in IE11. it works, so it must have something to do with the submission, maybe.
I made a test with code below on windows 10, Internet Explorer 11. It is working fine on Ie 11.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#clk").click(function(){
$("#js-form").submit();
console.log(222);
});
$("#js-form").on("submit", function (e) {
console.log("start");
$("#DefinitionID-error").hide();
$("#DefinitionID-error").val("Some text");
$("#DefinitionID-error").show();
alert("Form submitted");
});
});
</script>
</head>
<body>
<button id="clk">Click me to submit form</button>
<form id="js-form">
First name:<br>
<input type="text" id="DefinitionID-error" name="DefinitionID-error" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output in IE 11:

"document.forms.value" - Undefined in Microsoft Edge

I wrote a very quick javascript function to validate a very small form on an internal form used in our office. However, someoner today told me that it doesnt work in Edge, the code does not ever enable the submit button.
I console.log out the var values every time the function runs, and in edge, the vars are forever undefined. It seems like Edge does not respect "document.forms["abc"]["xyz"].value", but I cannot find any documentation or notes to support that.
I should clarify, I am not a javascript pro, I uyse it very sparingly, and in simple ways to get smal tasks done like this, so please dont judge my code too hard, haha.
Console Log:
q1=undefined
q2=undefined
q3=undefined
q4=undefined
My code is below, its pretty simple, nothing fancy..
function fieldcheck(){
var q1=document.forms["datacollect1"]["q1overall"].value;
var q2=document.forms["datacollect1"]["q2understand"].value;
var q3=document.forms["datacollect1"]["q3time"].value;
var q4=document.forms["datacollect1"]["q4recommend"].value;
console.log("q1="+q1+"\n"+"q2="+q2+"\n"+"q3="+q3+"\n"+"q4="+q4);
document.getElementById("datacollectsubmit1").disabled = true;
if (q1 && q2 && q3 && q4){
console.log("q1234 set");
document.getElementById("datacollectsubmit1").disabled = false;
}
}
I call the above on every click with:
document.onclick = function(){
fieldcheck();
}
Anyone have any clue as to why Edge is playing games? Or what I can substiture for document.forms.value that will work across other browsers and Edge too? Thanks.
Your above code is working in MS Edge. Possible that some other code caused this issue. I suggest you to take the code below and run it in MS Edge.
Code:
<!doctype html>
<head>
<script>
function fieldcheck(){
var q1=document.forms["datacollect1"]["q1overall"].value;
var q2=document.forms["datacollect1"]["q2understand"].value;
var q3=document.forms["datacollect1"]["q3time"].value;
var q4=document.forms["datacollect1"]["q4recommend"].value;
console.log("q1="+q1+"\n"+"q2="+q2+"\n"+"q3="+q3+"\n"+"q4="+q4);
document.getElementById("datacollectsubmit1").disabled = true;
if (q1 && q2 && q3 && q4){
console.log("q1234 set");
document.getElementById("datacollectsubmit1").disabled = false;
}
}
document.onclick = function(){
fieldcheck();
}
</script>
</head>
<body>
<form name="datacollect1" onsubmit="return fieldcheck()" method="post">
Name: <input type="text" name="q1overall"><br>
Name1: <input type="text" name="q2understand"><br>
Name2: <input type="text" name="q3time"><br>
Name3: <input type="text" name="q4recommend"><br><br>
<input type="submit" id="datacollectsubmit1" value="Submit">
</form>
</body>
</html>
Output in MS Edge browser:

Extension won't submit form correctly, but console will

I am trying to create an extension that will log me into a website as soon as it detects that I'm not logged in - ignore the fact that my background.js does not do this now, it's not the problem. - The website I am trying to log in to has my username and password already filled in the fields through my Chrome passwords. All the script has to do is click the login button.
Essentially it seems to work, except for the fact that it doesn't log in. Whenever the script tries to log in I get the message that my username/password is incorrect. When I execute the script through the console instead of injecting it through my background.js, it works perfectly.
background.js
chrome.tabs.onUpdated.addListener(function(id, info, tab){
if (tab.status !== "complete"){
return;
}
chrome.tabs.executeScript(null, {"file": "login.js"});
});
login.js (the form id is loginForm)
document.getElementById("loginForm").submit();
Any and all help is appreciated. Thanks!
I don't know why submitting the form with Chrome saved account info wouldn't work, but I made a workaround by making the user save his account info before using the extension.
popup.html
<!DOCTYPE html>
<html>
<head><title>Such Activity Options</title></head>
<body>
Username
<label>
<input type="text" id="username">
</label>
<br>
Password
<label>
<input type="password" id="password">
</label>
<div id="status"></div>
<button id="save">Save</button>
<script src="options.js"></script>
</body>
</html>
options.js
function saveAccount() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
chrome.storage.sync.set({
userName: username,
passWord: password
}
}
And then inject this script to read those and set them as values for the form before submitting
function clickLogin() {
document.getElementById("loginForm").submit();
}
function enterLoginInfo() {
chrome.storage.sync.get({
userName: 'username',
passWord: 'password'
}, function(items) {
document.getElementById('usernameLogin').value = items.userName;
document.getElementById('passwordLogin').value = items.passWord;
});
delay = Math.floor((Math.random() * (360000)) + 30000);
setTimeout(function(){clickLogin()}, delay);
}
enterLoginInfo();

W3Schools tutorial example not working with Coda on Mac

I am following a JavaScript tutorial on the W3Schools website and I have the following code:
<html>
<head>
<title>Hello!</title>
</head>
<body>
<script type="text/javascript">
function confirmShow
{
var r = confirm("Press one...")
if (r == true)
{
alert("Button pressed == OK")
}
if (r == false)
{
alert("Button pressed == Cancel")
}
}
</script>
<input type="button" onclick="confirmShow()" value="Show Confirm Box" />
</body>
</html>
and whenever I preview it in Coda or in Safari the alert never shows up.
Thanks in advance!
"function confirmShow" => "function confirmShow()"
Firebug is good for js debugging, try it. Safari has options too, AFAIK.
function confirmShow
{
function confirmShow()
{
?
I don't know if this is your problem, but your button is outside the <body> tag. That might cause you some trouble...
Also one would usually put a script like this in the <head> element. Just FYI.
1) w3schools is filled with errors and omissions. Better tutorials can be found at howtocreate.co.uk
2) You have no DOCTYPE declaration, and you're using XHTML syntax.
2.1) IE doesn't support true, see webdevout.net/articles/beware-of-xhtml for more information
3) You need to encapsulate the within a element as well as another block-level element as per the specification
See below for a proper HTML5 document. Notice the location and syntax
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<script>
function confirmBox() {
var ret = confirm('Some Text');
/*
Note the 3 equal signs. This is a strict comparison operator, to check both the 'value' as well as the type. see https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators for more
*/
if(ret === true) {
alert('Alert box for "Okay" value');
}
else if(ret === false) {
alert('Alert box for "Cancel" value');
}
}
window.onload = function() {
// Execute the confirmBox function once the 'button' is pressed.
document.getElementById('confirmBox').onclick = confirmBox;
}
</script>
</head>
<body>
<form>
<p>
<input type="button" id='confirmBox' value="Show Confirm Box">
</p>
</form>
</body>
</html>

Categories

Resources