This is most strange.
First: I suspect it has to do with my machine.
My problem is simple, I cannot get a conditional stamen to fire on first click. after the first click all is fine and works as should. This is only true for what I am writing recently, all my old files with similar statements work fine and can copy and paste from 3schools with no problems.
If I remove the conditional statement things works as expected, for example if I put the single statement in the tag onclick event it works on first click and is also true for a simple function but not the conditional statement. I have test code below though I am not sure if it will help as I know the code work and think that the first click finds the function but doesn't fire it. As the code shows I have tried a couple of events with the same results.
<script type="text/javascript">
function test() {
var test=document.getElementById('test');
if (test.style.visibility=="visible") {
alert("yes");
}
else {
test.style.visibility="visible";
}
}
</script>
</head>
<body>
<h1 id="test">Hello World You dumbass!</h1>
<button type="button" onmouseup="test()">test</button>
<input type="button" onclick="test()" value="text">
Something is having a bad hair day and I am not finding it. Any thoughts that are intelligent would be most appreciated, and verification that the coding is doing the same for others would also help. I am wounding if it might have to do with text encoding on my machine, though all works everywhere else code can have strang results if some sort of text formatting gets applied like writing code in MS Word.
Thanks
The answer below hit the nail on the head or returns true.
To make this work without a declared style in the tag the condition is written like this
<script type="text/javascript">
function test() {
var test=document.getElementById('test');
if (test.style.visibility=="") {
test.style.visibility="hidden";
}
else {
test.style.visibility="";
}
}
</script>
</head>
<body>
<h1 id="test">Hello World You dumbass!</h1>
<button type="button" onmouseup="test()">test</button>
<input type="button" onclick="test()" value="text">
I should of caught this but that's what one get when they assume, just as I assumed that because the style was declared in the head that the attribute carried over to the element, it doesn't.
hope this helps someone avoid the headache I just went through.
If you debug your function, you will find that test.style.visibility on first run is nothing as this css property is not set to anything for your element initially. As a result, your first run goes into your else and then sets this property. Now, since you have set the value to "visible" in the first run, every subsequent run alerts.
Related
This may be a really simple question but despite all my fiddling I can't get it to work and I think others might find it helpful in the future.
I'm using the embed payment button here: https://commerce.coinbase.com/docs/#payment-buttons
I have my script:
<div>
<a class="buy-with-crypto" data-custom="MY_CUSTOM_DATA"
href="https://commerce.coinbase.com/checkout/e690ad8a-8bed-4d6e-a8a7-
b47c2efc456f">
Register
</a>
<script src="https://commerce.coinbase.com/v1/checkout.js?version=201807">
BuyWithCrypto.registerCallback("onPaymentDetected", function(e){
alert("payment detected");
});
</script>
</div>
I've tried putting the function above in separate script tags, tried amending the url with .js?onload=[untold number variables/callbacks] as it details in the docs for initialization but it's still not working.
What I want (and what I believe this is meant to do), is once a payment is detected by the script it activates the function and sends an alert (alert to eventually be replaced by what I actually want but you get the idea).
Got it to work. I have the function in separate script tags above and below (just covering all options). I then amended the src/url with js?onload=BuyWithCrypto(onPaymentDetected) and the alert came through.
My website is essentially all one very long page and I've got an element I'd like to click before the page is loaded (it takes a while because it's so long), but I can't get it to trigger.
To test what could possibly be the cause of problems I made a very basic button that wrote to the console when clicked and during the loading phase it did nothing and then eventually once everything was fully loaded it worked.
The strange part is that looking up possible solutions so this problem, people unanimously say that the javascript gets loaded at whatever line it's written in the code and the link to my .js file is the second thing in the (right after ) so surely it should be loading immediately.
This isn't the full code obviously because the site is quite long, but here are the relevant parts:
"use strict";
function test() {
console.log("testingtesting");
}
function init() {
document.getElementById("buttonName").onclick = test;
}
window.onload = init;
<head>
<title>Title</title>
<script src="script.js"></script>
</head>
<body>
<button id="buttonName">
</body>
Does anyone have an explanation for why it's behaving the way it is and if there's anything I can do to change it?
When using an button you could use this method.
"use strict";
function test() {
console.log("testingtesting");
}
<head>
<title>Title</title>
<script src="script.js"></script>
</head>
<body>
<button id="buttonName" onclick="test()"/>
</body>
And if you did like to start the function as soon as its loaded, you could try a self invoking function.
(function () {
// body of the function
}());
The CODE!
$(document).ready(function() {
test();
$("#buttonName").click(function() {
test();
});
function test() {
console.log("testtest");
}
});
button {
height: 80px;
width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="buttonName">
How it works.
The question you asked is an interesting one.
I've used jquery. A library of javascript that makes most functions alot easier.
First. It doesn't actually matter (to much) where your script sits.
some people place it in the head if its IMPORTANT And reaaaaly needs to be run at the very beginning.
However for the most part you can put javascript before the closing body tag. This is something google, for SEO, approves of.
$(document).ready(function() The function here is called once the page is ready. Or does it? You'll be surprised to know that as a matter of fact its harder for you to stop the script loading before the page is fully loaded. :)
When the browser encounters a script tag when parsing the HTML, it stops parsing and gets to work on the javascript interpreter, which then ends up running the script. The html wont continue until the script execution is complete just incase you have a 'document.ready' function somewhere. This is the default behavior.
As you've written the rest ill assume you already understand what the rest of the code does.
onclick requires a separate function. But as i stated the script will be loaded much before the page is fully loaded. So you can have the onclick work before. However as the button wouldn't have loaded yet there's nothing for you to click.
Another way of approaching the problem.
function test() {
console.log("testingtesting");
}
button {
height: 80px;
width: 80px;
}
<button id="buttonName" onclick="test()"/>
Unlike your script document.getElementById("buttonName").onclick = test; This function is called in the DOM here <button id="buttonName" onclick="test()"/>
thus not requiring another line for the onclick.
Further reading
https://api.jquery.com/
https://www.innoq.com/en/blog/loading-javascript/
http://www.bardev.com/2013/01/03/browser-script-loading/
I have no idea whats going on with this but I have a website with this html:
<button id="mute"><input type="image" src="img/stop.png" class="stop" onclick="toggleStop(this);"/></button>
<button id="mute2"><input type="image" src="img/sonido.png" class="mute stop" onclick="toggle(this);"/></button>
And I'm trying to toggle the image when ON CLICK with this JS:
<script type="text/javascript">
function toggle(el){
if(el.className!="mute")
{
el.src='img/mute.png';
el.className="mute";
}
else if(el.className=="mute")
{
el.src='img/sonido.png';
el.className="audio";
}
return false;
}
</script>
<script>
function toggleStop(event){
if(el.className!="play")
{
el.src='img/play.png';
el.className="play";
}
else if(el.className=="play")
{
el.src='img/stop.png';
el.className="stop";
}
return false;
}
</script>
It works perfect on Chrome, but it doesnt work on Firefox. I have no clue what's wrong. Sadly I'm no developer, so I do what I can searching on the Internet. Any help would be appreciated.
There is no way this code, as posted, can run under Chrome (or Firefox or any other browser.)
I tried turning it into a snippet but had to make a number of changes to get it usable ... then I stopped trying.
Main issues:
You can't nest an <input> instead of a <button>. Use one or the other.
If you use <button>, it should be <button type="button"> to keep it from acting as a submit button and reloading your form.
Your code is broken.
function toggleStop(event){
if(el.className!="play")
There is no element el and an error is generated.
The first rule of JavaScript work: ALWAYS, ALWAYS check the error console.
So...I took what you said about an INPUT inside an BUTTON and I just delete the button and use an isntead and now it works on both browsers.
Thanks a lot Jeremy!
I am wanting to build some simple modules to help my students learn javascript. I have made a set of functions that I would like for the student to be able to enter and then that function be executed. For example. I have a function that moves an image from 1 div to another called move(); I then have a text field where the user needs to type move(); When they click submit I want the code they wrote to be executed so they can see what it does.
I had a really hard time searching for this and was hoping someone could point me in the right direction. Thanks!
<body>
<textarea id='userInput'></textarea>
<div id='go'>Go</div>
<div id='canvas'>
<div id='r1c1' class='square'><img src='dog.png' id='dog'></div>
<div id='r1c2' class='square'></div>
</div>
</body>
</html>
<script>
$('document').ready(function(){
$('#go').click(function(){
var code = $('#userInput').val();
EXECUTE code; //This is where I want the code to be executed//
});
});
function move(){
$('#dog').appendTo('#r1c2');
};
You can use eval() for this purpose (on w3Schools)
To take this even further, you can wrap the code in a try catch block to handle user errors.
You can also use the console with most browsers to execute javascript. Hit F12 to load up the developer tools on all of the browsers. Click on the console tab. Type javascript until your heart's content.
One advantage to this method is that you should be able to execute any code that is included on the page.
Code works across all major browsers, but firing a simple alert on click is not working.
This is in my header
<script type="text/javascript">
function this_function() {
alert("got here mango!");
}
</script>
This is in the body
<button type="button" onclick="this_function()">click me</button>
If I put the "onclick" into the tag then it works fine and dandy.
Any and all suggestions on how to get this to work in IE would be great. Thanks in advance.
Sorry, by "into the tag" i meant putting onclick="alert()" into the tag.
Try: <button type="button" onclick="javascript:this_function();">click me</button>
It's advised to separate JavaScript and markup. Thus regardless you should assign an ID to the button and attach the onclick handler like this:
document.getElementById("button").onclick = function() {
alert("got here mango!");
};
Are you running this sandboxed? If you aren't I would highly suggest trying this all by its self in a single HTML file with no other things going on. It is possible that IE7 is blowing up (quietly) on another script issue that is preventing your "this_function" from loading into the DOM properly.
After you have done this put the in your there is no need for it to be in the head and I have actually seen this cause problems under certain conditions