I have a button that acts as a link. The onclick is the myAlert() function shown below. The function creates a popup asking if you want to continue. It still goes to the next page even if you hit "cancel". What should I do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="grey" align="center">
<button onclick="myAlert()">Sign up</button><button >Log in</button>
<script>
function myAlert(){
if (confirm('Are you sure you want to sign up?')) {
console.log('Thank you.');
} else {
}
}
</script>
</body>
</html>
You placed the button inside the link itself. Therefore after closing the dialog, the browser processes the onclick event of the link which results in browsing to the to the link target.
You can remove the link elements completely and handle everything using the buttons:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="grey" align="center">
<button onclick="myAlert('333.html')">Sign up</button><button onclick="window.location.href='22.html'">Log in</button>
<script>
function myAlert(redirect){
if (confirm('Are you sure you want to sign up?')) {
window.location.href=redirect
console.log('Thank you.');
} else {
}
}
</script>
</body>
</html>
Use the preventDefault() method to cancel the default action that belongs to going to the next page.
function myAlert(e) {
if (confirm('Are you sure you want to sign up?')) {
console.log('Thank you.');
} else {
e.preventDefault();
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="grey" align="center">
<button onclick="myAlert(event)">Sign up</button><button >Log in</button>
</body>
</html>
Related
I need to know how can I disable a button when I hover over it, and then enable it when I'm not.
I've tried javascript, to disable it when the mouse coordinates were just so, but it didn't work.
Here's my code so far:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>This is a button</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button type="button">Press Me</button>
<script src="script.js"></script>
</body>
</html>
This is for a joke, but I want it done quickly.
Thanks,
Enlighten Me
PS: I'm new to StackOverflow, so please give any pointers to posts and such.
use this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>This is a button</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button type="button" id="hbtn">Press Me</button>
</body>
<script>
document.getElementById('hbtn').addEventListener('mouseenter',(event)=>{
event.target.disabled=true;
});
</script>
</html>
Hope this helps
#joke-btn:hover{
display:none
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>This is a button</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button id="joke-btn"type="button">Press Me</button>
<script src="script.js"></script>
</body>
</html>
With JavaScript, you could add event listeners for the onmouseenter and onmouseleave DOM events and change the disabled property value of the button HTML element.
For example, in your case, a simple code solution (not the only possible one), would be something like:
const button = document.querySelector("button");
button.addEventListener("mouseenter", () => {
button.disabled = true;
});
button.addEventListener("mouseleave", () => {
button.disabled = false;
});
Setup enter/leave event listeners on your button...
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event
I think the simplest option here is to just do it with css. However this doesn't actually disable the button, just the mouse click event, so you can still click the button when it is selected by using the return key:
Assign a class to your button (you can call it anything you want):
<button class="myButton" type="button">Press Me</button>
And in your CSS file disable mouse clicks:
.myButton:hover {
pointer-events: none;
}
So I made a small version of my problem. Here I am adding text into an input element. But when it is added it doesnt trigger the event listener.
function testFunction() {
document.getElementById("testInput").addEventListener("change", () => {
console.log("hi");
});
}
function testText() {
document.getElementById("testInput").value = "Hello there";
}
testFunction();
<!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" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<script></script>
<button onclick="testText()" style="height: 20px"></button>
<input id="testInput" />
<script src="script.js"></script>
</body>
</html>
You need to create the event manually and use dispatchEvent() method to fire the event to the target element.
function testFunction() {
document.getElementById("testInput").addEventListener("input", () => {
console.log("hi");
});
}
function testText() {
document.getElementById("testInput").value = "Hello there";
let event = new Event("input");
document.getElementById("testInput").dispatchEvent(event);
}
testFunction();
<!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" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<script></script>
<button onclick="testText()" style="height: 20px"></button>
<input id="testInput" />
<script src="script.js"></script>
</body>
</html>
I was getting this error in my console while trying to execute a function using the "onclick" event inside of a button. The error I got was,
Uncaught ReferenceError: foo is not defined
onclick http://localhost:3001/bar:1
onclick http://localhost:3001/bar:1
I defined foo like this in the <body> tag followed by a script tag,
function foo(){
fooBar();
}
Thanks.
Edit: Heres my 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">
<meta name="description" content="app lol">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title><% title %></title>
</head>
<body>
<script>
function foo() {
fooBar();
}
</script>
<button onclick="foo()">bar</button>
</body>
</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"> <meta name="description" content="app lol"> <script src="unpkg.com/axios/dist/axios.min.js">
</script>
<title></title>
</head>
<body>
<script>
function fooBar()
{
alert("hey");
}
function foo()
{
fooBar();
}
</script>
<button onclick="foo()">bar</button>
</body>
</html>
<html>
<head><title></title></head>
<body>
<button id="btn" onClick="foo()">Click me </button>
<script>
btn = document.getElementById("btn");
function foo(){
btn.style.color = "red";
}
</script>
</body>
</html>
This works!
Add an ID to your button. onclick is kinda buggy, because Google security features prevent you from doing so. It is even a good idea to separate JavaScript and HTML.
I usually assign an ID to a div, and querySelector them.
<div id="an-id">
<input />
</div>
document.querySelector("#an-id").querySelector("input").addEventListener("click", foo);
(Put your script after the button)
Is this how your setup looks? If yes, there shouldn't be any error.
<script>
function foo () {
console.log('Foo function');
}
</script>
<button onclick="foo()"> My Button </button>
I have embedded the twitter widget in an HTML. I have a JS object that contains URLs of 10 twitter profiles. I want to make a function that would let me replace the current URL (in the widget) with another one from the object.
However when running the script, the href will not change (error say its null).
Does Twitter maybe prevent any changes to href or other tags inside the HTML class?
<!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>Document</title>
</head>
<body>
<p>
<a class="twitter-timeline" id="twitter" data-width="300" data-height="500" href="https://twitter.com/Tesla"></a>
</p>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<button onclick="change()">Change link</button> <button onclick="check()">Preview link</button>
<script>
var URL = document.getElementById("twitter").href;
console.log(URL);
function change() {
alert(document.getElementById("twitter").href = "https://twitter.com/IBMref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor");
}
function check() {
console.log(document.getElementById("twitter").href);
}
</script>
</body>
</html>
It did change, you just called alert on the change itself.
var URL = document.getElementById("twitter").href;
console.log(URL);
function change() {
document.getElementById("twitter").href = "https://twitter.com/IBM?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor";
alert(document.getElementById("twitter").href);
}
function check() {
console.log(document.getElementById("twitter").href);
}
<!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>Document</title>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>
<body>
<p>
<a class="twitter-timeline" id="twitter" data-width="300" data-height="500" href="https://twitter.com/Tesla"></a>
</p>
<button onclick="change()">Change link</button>
<button onclick="check()">Preview link</button>
</body>
</html>
I'm creating a HTML IOS App with a Log in System.
At the moment when the user presses "log out" It will vibrate and a confirmation will pop up to say "are you sure you want to log out" there are two answers... Ok and Cancel.
I want OK to go to index.html
but CANCEL to stay on the same page (not log out).
At the moment both Ok and Cancel are directing to index.html (see code)
function vibrate() {
navigator.notification.vibrate(2000);
window.confirm('Are you sure you want to log out?')
window.location.href='index.html';
}
I'd appreciate some help
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
</script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function vibrate() {
navigator.notification.vibrate(2000);
navigator.notification.confirm('Are you sure you want to logout?',
decide,
'confirm logout?',
['cancel','ok'],
);
}
function decide(button){
if(button==2){
window.location.href='index.html';
}else{
//Another stuff
}
}
</script>
<title>Logged in</title>
</head>
<body>
<h1>Welcome</h1>
<p>Home</p>
<p>Courses</p>
<input type="button" value="Log Out"onClick="vibrate();">
</body>
</html>
With phonegap you should do something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function vibrate() {
navigator.notification.vibrate(2000);
navigator.notification.confirm('Are you sure you want to logout?',
decide,
'confirm logout?',
['cancel','ok']
);
}
function decide(button){
if(button==2){
window.location.href='index.html';
}else{
//Another stuff
}
}
</script>
<title>Logged in</title>
</head>
<body>
<h1>Welcome</h1>
<p>Home</p>
<p>Courses</p>
<input type="button" value="Log Out"onClick="vibrate();">
</body>
</html>