I try to display a popup when I click on a button using javascript.
But this error appears :
Uncaught ReferenceError: confirmation is not defined
at HTMLButtonElement.onclick
function confirmation() {
var answer = confirm("Leave tizag.com?")
if (answer) {
alert("Bye bye!")
window.location = "http://www.google.com/";
} else {
alert("Thanks for sticking around!")
}
}
<button type="submit" class="danger btn btn-danger" onclick="confirmation()">Transférer</button>
I suggest a solution that will work for sure.
Add an event listener of DOMContentLoaded to the whole document and call an anonymous function.
You can then wrap your code in that function's brackets
and it will execute once loading is complete.
<button type="submit" class="danger btn btn-danger" >Transférer</button>
<script>
var btn = document.querySelectorAll("button")
document.addEventListener('DOMContentLoaded', function () {
btn[0].addEventListener("click", function () {
// When this button is clicked we want to enable zooming of our list.
// To do this we add an event listener to our list itself,
// so when the cursor hovers it, the enlarge function gets called.
var answer = confirm("Leave tizag.com?")
if (answer) {
alert("Bye bye!")
window.location = "http://www.google.com/";
} else {
alert("Thanks for sticking around!")
}
});
});
</script>
have a good day :)
You may haven't linked your .js file with your .html file. That's the only possible problem.
At the end of your html <body> tag add a:
<script src="your-script.js" type="text/javascript"></script>
Did you place your javascript code to a script block? i.e
<script type="text/javascript">
function confirmation() {
var answer = confirm("Leave tizag.com?")
if (answer) {
alert("Bye bye!")
window.location = "http://www.google.com/";
} else {
alert("Thanks for sticking around!")
}
}
</script>
<button type="submit" class="danger btn btn-danger" onclick="confirmation()">Transférer</button>
Related
i was establishing communication between website and flutter i want to fire message on button click and i have implemented the code below.
<button onclick="buttonClick()" type="button">Cancel</button>
<script>
function buttonClick() {
window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {
window.flutter_inappwebview.callHandler('cancelbuttonState', 1, true,['msg','CancelbuttonClicked'], {test:'Go-Back'}).then(function(result) {
alert("Hello! Cancel Buttton clicked!!");
console.log('Hello! Cancel Buttton clicked!!');
});
});
}
</script>
in flutter side i have implemented the following to get the message
controller.addJavaScriptHandler(
handlerName: "cancelbuttonState",
callback: (args) async {
print('Cancel Button clicked');
return args.reduce((curr, next) => curr + next);
});
but both JavaScript and app dint give me console print thanks.
You are executing the below line too late inside the body of the cancel function. You will need to add the listener much earlier for the callback to be registered.
In other words, you are listening for an event that is already finished.
window.addEventListener("flutterInAppWebViewPlatformReady" .....
Reorganize your code in a fashion similiar to this:
<button onclick="buttonClick()" type="button">Cancel</button>
<script>
isAppReady = false;
window.addEventListener("flutterInAppWebViewPlatformReady", function (event) {
isAppReady = true;
});
function buttonClick() {
if (isAppReady) {
window.flutter_inappwebview.callHandler('cancelbuttonState', 1, true, ['msg', 'CancelbuttonClicked'], { test: 'Go-Back' }).then(function (result) {
alert("Hello! Cancel Buttton clicked!!");
console.log('Hello! Cancel Buttton clicked!!');
});
}
}
</script>
I have listUser.jsp, it has a link that "calls" user.jsp. user.jsp have a form that saves in my DB and listUser.jsp shows it. The problem is: i want user.jsp to open in a modal, is that possible? i've tried iframe inside the modal, but when i Submit in user.jsp, inside the iframe, it "returns" to listUser.jsp and doesn't close.
with the iframe i've tried this (didn't work):
<script>
function yourFunctionName () {
var div = document.getElementById('dialog');
if(document.getElementById('noop').src === 'user.jsp'){
div.style.display = 'none';
} else {
div.style.display = 'block';
}
}
</script>
<script>
function myFunction() {
setInterval(yourFunctionName, 1000);
}
</script>
i'm learning, so i don't know much
You can use jquery for this purpose,
listUser.jsp
<div id=content></div>
Use jquery instead of yourFunctionName (), like this
document.ready(function(){
$('#button').on("click", function() {
$("#content").load(absolutePath/user.jsp);
});
});
hope this will helpful!
So I'm trying to make a chrome extension to store stuff like "Name " and to list them as buttons so I can share current page to anyone from the list. Right now, I'm trying to write/read from chrome.storage (cloud) but my JS isn't really doing anything! The code seems fine, it just doesn't do anything!
window.load = myJs;
function myJs() {
document.addEventListener('DOMContentLoaded', function () {
var link = document.getElementById('get');
link.addEventListener('click', function () {
function getValues() {
chrome.storage.local.get('Name', function (result) {
Name = result;
alert(result);
});
}
});
});
document.addEventListener('DOMContentLoaded', function () {
var link = document.getElementById('savechanges');
link.addEventListener('click', function () {
function saveChanges() {
var newname = getElementById("newname");
var newemail = getElementById("newmail");
if (!newname) {
message('Error: No name specified');
return;
}
if (!newemail) {
message('Error: No E-mail specified');
return;
}
chrome.storage.sync.set({
'Name': newname
}, {
'Email': newemail
}, function () {
message('New contact added');
window.location.href = "popup.html";
});
}
});
});
}
So my extension has 2 pages, one for adding new people with 2 inputs, and one for grabing the values (at least for now, I plan on listing them as button as soon as I find out how)
Here is the html from both
page.html
<body>
<input type="text" id="newname" placeholder="Enter new contact name">
<input type="text" id="newemail" placeholder="Enter new contact email">
<button name="Add" id="savechanges" class="m-btn">Add new contact</button>
<script src="popup.js"></script>
</body>
popup.html
<body>
<button type="button" id="get" class="m-btn">Get</button>
<script src="popup.js"></script>
<input type="submit" name="add" value="Add" class="m-btn">
</body>
For one, your event listeners are declaring two local functions, getValues and saveChanges, that are never called. You can just remove these outer function declarations and let the body of these two functions be the body of the event handlers, like so:
document.addEventListener('DOMContentLoaded', function () {
var link = document.getElementById('get');
link.addEventListener('click', function () {
chrome.storage.local.get('Name', function (result) {
// Check chrome.runtime.lastError to see if there was an error
Name = result;
alert(result);
});
});
});
You should be able to inspect your popup / background pages to debug your scripts in the Sources tab in Chrome's developer tools. I would set some breakpoints in these event handlers and ensure they are getting hit properly.
For two, StorageArea.set(object items, function callback) is the signature of the set method. To set two values, you want to pass a single object instead of two different objects:
chrome.storage.sync.set({
'Name': newname,
'Email': newemail
}, function() {
// Check chrome.runtime.lastError to see if there was an error
...
});
Lastly, there's no real reason to use window.onload (I think you meant to use window.onload here, right?) or two different DOMContentLoaded listeners; why not consolidate them into one (not forgetting to check for getElementById returning null, since it seems like you're sharing this script between the two pages)?
Edit: also, you appear to be mixing sync/local storage for your set/get respectively.
Im having issues with this javascript running prior to the user input, can someone help me fix this.
im just trying to make a little html page with a textbox and a button, that then clicked opens a new windows with a modified URL.
<input type="text" name="enter" class="enter" value="" id="lolz" />
<button type="button" id="the_button">Count</button>
document.getElementById('open').addEventListener('click', myFunction());
function myFunction() {
var button = document.getElementById("the_button");
var siteid = document.getElementById('lolz').value
button.onclick = count();
function count() {
window.location = "http://www.websiteimusing.com/" + siteid;
}
}
You can check the code out here
The Actually generate output from that website's code is this
Updated Code
document.getElementById('the_button').addEventListener('click', myFunction);
function myFunction() {
var button = document.getElementById("the_button");
var siteid = document.getElementById('lolz').value
button.onclick = count();
function count() {
window.location = "http://www.websiteimusing.com/" + siteid;
}
}
There's no element with id open in your code, so you're trying to add an event listener to null. The console will tell you the same:
Uncaught TypeError: Cannot call method 'addEventListener' of null
Also make sure to remove the parens from your event listener function, as the other posters have stated.
Change to:
document.getElementById('open').addEventListener('click', myFunction);
When you put () after a function name, it means to call the function at that time.
On this line
document.getElementById('open').addEventListener('click', myFunction());
you are calling the function by adding the ()
change that to:
document.getElementById('open').addEventListener('click', myFunction);
I wrote some html/css/javascript code that was taken verbatim from a javascript textbook. For some reason, the code does not run correctly in my browser (which is the newest version of Firefox). When I click the button, the javascript function "toggleStyle()" does not execute in the browser at ALL. This is the code for the button:
<button type="button" onclick="toggleStyle()">Toggle Style</button>
This is the javascript coding. Note that when I click the button, not even the alert() method is executed:
function toggleStyle() {
alert("toggleStyle() is working.");
var divMessage = document.getElementById("divMessage");
if (divMessage.className === "message-style1") {
divMessage.className = "";
}
else {
divMessage.className = "message-style1";
}
Did you put the code inside <script type="text/javascript">?
<script type="text/javascript">
function toggleStyle() {
alert("toggleStyle() is working.");
var divMessage = document.getElementById("divMessage");
if (divMessage.className === "message-style1") {
divMessage.className = "";
}
else {
divMessage.className = "message-style1";
}
}
</script>
The above code is working:
For starters, I don't see the end } brace; do you have one?
Also, where is the function defined? Does the script get loaded? Are there any errors?