So i have just made a simple HTML page in which a JS script runs when the page loads. But the problem is that it just goes infinite after asking password. I tried to find some solutions but failed to do the same. Please help. Below is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert test</title>
</head>
<body onload="alert()">
<script>
function alert() {
var uname, pass, corr_uname = "admin", corr_pass = "admin";
while(!uname) {
uname = prompt("Enter Username: ");
}
while(!pass) {
pass = prompt("Enter Password: ");
}
if((uname == corr_uname) && (pass == corr_pass)) {
alert("Access Granted!!");
} else {
alert("Access Denied!");
alert();
}
}
</script>
<h1>Welcome!</h1>
</body>
</html>
The funny thing is that when i run the same code (JS runs after clicking a button) in W3Schools, it just works fine!!
The problem is that you have created a function named alert which already exists in javascript, so you are calling it recursively and infinitely.
Solution fix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert test</title>
</head>
<body onload="alert2()">
<script>
function alert2() {
var uname, pass, corr_uname = "admin", corr_pass = "admin";
while(!uname) {
uname = prompt("Enter Username: ");
}
while(!pass) {
pass = prompt("Enter Password: ");
}
if((uname == corr_uname) && (pass == corr_pass)) {
alert("Access Granted!!");
} else {
alert("Access Denied!");
myFunction();
}
}
</script>
<h1>Welcome!</h1>
</body>
</html>
I renamed your functional alert to alert2.
Kindly accept it as answer if it works for you, thanks!
JavaScript had mutable built-in functions so your alert function overwrites the native alert and every alert call becomes recursive in a never ending loop.
Besides renaming the function, there's no need to use a while loop since prompt stalls execution. You can use uname && to invalidate the username if the user cancels the username prompt.
There's also no need to use <body onload="??"> if you just put the script within <head>...</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert test</title>
<script>
const corr_uname = "admin", corr_pass = "admin";
function authenticate() {
const uname = prompt("Enter Username: ");
const pass = uname && prompt("Enter Password: ");
const isCredentialsValid = uname == corr_uname && (pass == corr_pass);
const accessType = isCredentialsValid ? 'Granted' : 'Denied';
alert(`Access ${accessType}!!`);
}
authenticate();
</script>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
Related
The thing i wanna do is when user writes something to input and sumbits it, the page will change to the input.
Example:
If user writes "Web" to the input, the page title should change to "Web"
Here's the code:
JS:
document.getElementById("titleSumbitBtn").onclick = function (){
var newTitle = document.getElementById("newTitle").textContent;
document.getElementById("title").innerHTML = newTitle;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="title">Web Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center><label id="originLabel">Welcome to Web Editor!</label><br></center>
<br><label id="changeTitleLabel">Change the title of Web: </label><br>
<input type="text" id="newTitle"><br>
<button type="button" id="titleSumbitBtn">Change</button>
</body>
</html>
You can assign new title to the document like this:
document.getElementById("titleSumbitBtn").onclick = function (){
var newTitle = document.getElementById("newTitle").value;
document.title = newTitle;
}
This is actual implementation but keep in mind that it must run after the DOM element with id newTitle.
If you put your <script> tag inside <head>, you'll need DOMContentLoaded:
document.addEventListener('DOMContentLoaded', () => {
document.getElementById("titleSumbitBtn").onclick = function (){
var newTitle = document.getElementById("newTitle").value;
document.title = newTitle;
}
})
try this:
document.getElementById("titleSumbitBtn").addEventListener("click", function (){
var newTitle = document.getElementById("newTitle").value;
document.getElementById("title").innerText = newTitle;
})
I'm new to JavaScript and I've been trying to get the title text to switch between different texts for a day now. I've gathered some code snippets and put them together, so I'm not quite sure what's going on.
function sleep(milliseconds) {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
function switchingText(); {
document.getElementByID("title").innerHTML = "Text";
sleep(2000);
document.getElementByID("title").innerHTML = "Text2";
sleep(2000);
switchingText();
}
I would appreciate any help greatly.
This is a sample solution for your dilemma:
const title= document.getElementById("title");
const switchHeading = () => {
if (title.innerHTML== "Text"){
title.innerHTML = "Text2";
}else{
title.innerHTML = "Text";
}
}
setInterval(() => {
switchHeading()
}, 2000);
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1 id="title">Text</h1>
<script src="./script.js" async defer></script>
</body>
</html></html>
Helpful links:
W3Schools Set Interval
All you need to do is get the title element like you did but instead of changing the InnerHTML, change the value, like so:
document.getElementByID('title').value="Text"
Hope you found what you were looking for.
Instead of doing
document.getElementByID("title").innerHTML = "Text";
in the switching text function,
you need to do
document.title = 'your text'
I want to make a program which adds a textbox every time you click a button. Here's my code:
window.onload = function () { linelist = document.getElementById("linelist"); };
function AddLine() {
linelist.innerHTML += "<div class=\"normallink\"><input type=\"text\"><button class=\"dustbin\"><img src=\"dustbin.png\"></button></div><br />";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="linelist"></div><br />
<button id="addline" onclick="Addline();">+</button>
</body>
</html>
When I run it, it generates an error. Why is this occurring?
You have to define linelist outside the functions first with let or var:
let linelist = null;
window.onload = function () { linelist = document.getElementById("linelist"); };
function AddLine() {
linelist.innerHTML += "<div class=\"normallink\"><input type=\"text\"><button
class=\"dustbin\"><img src=\"dustbin.png\"></button></div><br />";
}
I'm trying to create a word game that will choose a random item from a list but some of the items have different weights so they show up less often. I want the function to be called once the user presses a HTML button. I have the code working fairly well right now (to the console). My question is how can I get the output from the function into the html web page. If anyone could help me with this, it would be a huge help.
Here's my code:
var item = {
'apple':10,
'banana':10,
'orange':10,
'grapes':1,
}
function testGame(input) {
var array = [];
for(var item in input) {
if(input.hasOwnProperty(item) ) {
for(var i=0; i<input[item]; i++ ) {
array.push(item);
}
}
}
return array[Math.floor(Math.random() * array.length)];
}
console.log(testGame(item));
I have some HTML code too, just don't know where or how to write the button code properly to produce the outcome I'm looking for.
Here's the HTML
<!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">
<title>Randomizer Game</title>
</head>
<body>
<h1>Game</h1>
<script src="index.js"></script>
<button onclick="testGame();">Test</button>
</body>
</html>
You can make new function where you can call it on button just like you called it with console.log:
<button onclick="start();">Test</button>
and call your randomizing function inside:
function start() {
testGame(item)
}
Then inside function testGame don't use return, just save random word result in variable and print it in HTML:
var result = array[Math.floor(Math.random() * array.length)];
console.clear();
console.log(result);
document.getElementById("result").innerHTML=result;
I have added div result in HTML:
<div id="result"></div>
EXAMPLE SNIPPET:
var item = {
'apple': 10,
'banana': 10,
'orange': 10,
'grapes': 1,
}
function testGame(input) {
var array = [];
for (var item in input) {
if (input.hasOwnProperty(item)) {
for (var i = 0; i < input[item]; i++) {
array.push(item);
}
}
}
var result = array[Math.floor(Math.random() * array.length)];
console.clear();
console.log(result);
document.getElementById("result").innerHTML=result;
}
function start() {
testGame(item)
}
<!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">
<title>Randomizer Game</title>
</head>
<body>
<h1>Game</h1>
<div id="result"></div>
<script src="index.js"></script>
<button onclick="start();">Test</button>
</body>
</html>
Use getElementById to get an element by id, for this I gave your button an id. With addEventListener you can add an event (here: click) to be call a function.
Doing here your randomizing. Get the element where you want the output again with getElementByIdand add with textContent your answer to it.
const ITEMS = {
'apple':10,
'banana':10,
'orange':10,
'grapes':1,
}
document.getElementById('btn').addEventListener('click', function testGame() {
var array = [];
for(var item in ITEMS) {
if(ITEMS.hasOwnProperty(item) ) {
for(var i=0; i<ITEMS[item]; i++ ) {
array.push(item);
}
}
}
document.getElementById('item').textContent = array[Math.floor(Math.random() * array.length)];
});
<!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">
<title>Randomizer Game</title>
</head>
<body>
<h1>Game</h1>
<button id='btn'>Test</button>
<div id='item'></div>
</body>
</html>
We are using IE edge for our application but we want to make one particular content page should open in IE 10.
We cant add
<meta http-equiv="X-UA-Compatible" content="IE=10" />
to the master page because it will get reflected in all other pages.
How to implement
<meta http-equiv="X-UA-Compatible" content="IE=10" />
to a particular content.
I tried the following code in the content page but no change.
<script type="text/javascript">
function AddCompatible() {
var m = document.createElement("meta");
m.setAttribute("http-equiv", "X-UA-Compatible");
m.setAttribute("content", "IE=10");
document.getElementsByTagName("head")[0].appendChild(m);
}
_spBodyOnLoadFunctionNames.push("AddCompatible")
Please add the below code in page_init or On_init in code behind.This code will force to IE10 compatible.
HtmlMeta tag = new HtmlMeta();
tag.HttpEquiv = "X-UA-Compatible";
tag.Content = "IE=10";
this.Page.Header.Controls.AddAt(0, tag);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
<body>
<script type="text/javascript" nonce="IICYfT/o8JWeqWwgKrYbJA">
document.addEventListener('DOMContentLoaded', function() {
var frameType = window.location.hash[1];
var callbackWindow;
switch (frameType) {
case 't'
FUCk:
callbackWindow = window.parent.opener;
break;
case 'p':
callbackWindow = window.open('', 'gtn-roster-iframe-id');
break;
case 'e':
callbackWindow = window.parent.frames['gtn-roster-iframe-id'];
break;
case 'n':
callbackWindow = null;
break;
default:
throw Error('Unknown frame type: ' + frameType);
}
if (callbackWindow != null) {
callbackWindow['_GC_OnFrameReady'](window);
}
});
</script>
</body>
</html>