My code works fine on my pen at Codepen... Random Quote Generator at Codepen
BUT...
I've been going over this at my site, but I'm just not seeing what the issue is. Random QuoteGenerator at my personal site
var quote = document.getElementById('quote');
var click = document.getElementById('click');
var quoteList = ["'You will never be happy if you continue to search for what happiness consists of. You will never live if you are looking for the meaning of life.'",
"'Do not read, as children do, to amuse yourself, or like the ambitious, for the purpose of instruction. No, read in order to live.'",
"'Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.'",
"'A life spent making mistakes is not only more honorable, but more useful than a life spent doing nothing.'",
"'In vain have I struggled. It will not do. My feelings will not be repressed. You must allow me to tell you how ardently I admire and love you.'",
"'It is better to remain silent at the risk of being thought a fool, than to talk and remove all doubt of it.'",
"'Have you ever been in love? Horrible isn't it? It makes you so vulnerable. It opens your chest and it opens up your heart and it means that someone can get inside you and mess you up.'",
"'The problem with the world is that the intelligent people are full of doubts, while the stupid ones are full of confidence.'",
"'Ok. You fuck me, then snub me. You love me, you hate me. You show me a sensitive side, then you turn into a total asshole. Is this a pretty accurate description of our relationship.'",
"'I love sleep. My life has the tendency to fall apart when I'm awake, you know?.'",
"'If I had a flower for every time I thought of you...I could walk through my garden forever.'",
"'Keep away from people who try to belittle your ambitions. Small people always do that, but the really great make you feel that you, too, can become great.'",
"'Never tell the truth to people who are not worthy of it.'",
"'The one you love and the one who loves you are never, ever the same person.'",
"'Becoming fearless isn't the point. That's impossible. It's learning how to control your fear, and how to be free from it.'",
"'I hope she'll be a fool -- that's the best thing a girl can be in this world, a beautiful little fool.'"];
var randomQuote = function(){
var twitter = document.getElementById('twitter');
var index = Math.floor(Math.random()*quoteList.length);
twitter.href = "https://twitter.com/intent/tweet?text=" + encodeURI(quoteList[index]);
quote.innerHTML = quoteList[index];
};
randomQuote();
click.addEventListener('click', randomQuote, false);
So the question is, what is going on? Same code, quotes aren't working on my personal site. Any help would be greatly appreciated. Thanks.
In your HTML script element, you're referencing the script with a href attribute when it should be src.
Also your code is executing before the DOM exists, move the Javascript to the end of the HTML body section.
<script src="//six03.com/quotes/script.js" type="text/javascript"></script>
</body>
</html>
You're attempting to bind the events prior to the page finishing its load. The simplest fix is to just move the script tag to the bottom of the page and load it at the end of the body.
Otherwise you can use a library to be sure the page is loaded or bind to an event. In jQuery that would be using the $(document).ready(function(){}) event.
Related
I'm slowly learning to implement Javascript into my websites to generate automated changes, actual code is scary for my graphic designer approach but I think I'm getting there.
I followed an exercise some time ago that had me make a countdown clock that resets every time it reaches 0, nothing to crazy but it got me thinking:
Is there any way to make that reset affect the content of the entire page?
The practical case that made me think of it is the website of a restaurant that has a different coupon every day of the week, they upload the coupon code to their social media everyday but if I could develop a site that loops the codes depending on the day and make it change the text content and the stylesheet on it's own the process would be automatic.
I can't figure out how you'd link the clock reset to that change though, tried searching for it and I think this might be solved with some AJAX shenanigans, but it seems to be a bit too specific to find, any guidance would be greatly appreciated.
Hi and welcome to stackoverflow. This is a very general question. It is hard to answer without specificity that requires knowledge the community doesn't have. For example:
When you say "I followed an exercise some time ago...", what did the code look like? What was your final product? How is JavaScript used?
When asking a question in stackoverflow, it can be helpful to share a snippet of what the code looks like so that others can help by testing the code themselves and giving feedback. Or at the very least observing the functionality and maybe catching small syntax errors.
To the second point of "Is there any way to make that reset affect the content of the entire page?" Yes. There are MANY MANY MANY ways to affect content of a page, either in pieces or in its entirety. Once again it depends on what you want to do with the code that YOU have specifically. Even with the basic tools of HTML and JavaScript you can do this. You don't need "AJAX shenanigans" LOL.
If you are just starting out, dig deep into the basics of JavaScript(if that is your preferred language). You will find a whole host of versatile functionality through creating objects, methods, manipulating the DOM, building your own event handlers, etc. Also if none of what I just wrote makes any sense, then you now have some terms worth researching on your own.
I hope that this is helpful for you, and I wish you the best of luck on your coding journey.
just made an XKCD app for a mean stack class Im taking, and Im getting pretty close to being done, but one doggone visual bug thats pestering me, with angular animations:
here is my deployed app:
https://desolate-savannah-69543.herokuapp.com/#/
and here is the code:
https://github.com/nevaldiv/project4_relevant_xkcd
the issue is likely in my CSS I think the animations.css specifically, but am unsure.
but CSS is not my specialty so, really dont know.
for example, if you click on the checkbox filter for 2008 over and over, you can see that the ng-repeat div's popup slightly to the right? and 'ghost' or leave trails as they pop into their final resting position more towards the left, the heck is causing that? is that some CSS stuff outside of my angular-animations.css causing that? how can I diagnose that if its so fast and then gone, I feel like I need experienced eyes on it.
Ive tried but for the life of me cant seem to figure out what the heck is causing it.
anyway, feel free to tinker on my app thingy, I didnt have enough time to tie together my token auth with (or my user model with my comics model at all, even, besides schematically) anything, so its mostly just what you see on the landing page thats all the meat I got.
some more info (cant post more than 2 links)
here is the link to potential trouble code:
https://github.com/nevaldiv/project4_relevant_xkcd/blob/master/public/css/animations.css#L72
I'm attempting to create a new HTML doc using document.write INSIDE another document.write in JavaScript.
I know this is a painful way to do it (and feel free to rewrite the code with the desired output), but here it is:
var newDoc = document.open("text/html", "replace");
newDoc.write("<html><head><title>Failure!</title></head><body><h5>js::error 5015 &&syn.0</h5><p>In Quantum Mechanisms exists a quantum state known as quantum superposition - the state of being two things at once given a random subatomic event that may or may not occur.</p><p>A famous experiment by Erwin Schrödinger, a cat was placed in a box along with a poison flask that would kill the cat, only activating if a subatomic change was detected (which is completely random). The thought experiment brought forth the idea of the cat being <em>dead</em> and <em>alive</em> at the same exact time, but you aren't able to know which it is. So in theory, by opening the box and finding that the cat is dead, you have essentially killed the cat yourself.</p><p>Quantum Mechanics have been applied to the button you just clicked. The choice was yours on whether or not to click it, and you did not know where you would end up. You can say that it would have unlocked a new upgrade, or break the game, but since you clicked the button, you therefore must have broken the game yourself. Just like that, curiosity killed the cat. Sorry, quantum superposition is pretty terrible. Fortunately, you can click this button below to continue on your journey.</p><button onclick=\"var newDoc = document.open(\"text/html\", \"replace\"); newDoc.write(\"<html><head><title>Double Fail</title></head><body><p>No seriously, quantum mechanics are pretty bad. :)</p></body></html>\"); newDoc.close();\">Continue</button></body></html>");
newDoc.close();
As you can see, the button is not outputting the information clearly. Not sure what i'm doing wrong.
A lot of escaping needs to happen:
var newDoc = document.open("text/html", "replace");
newDoc.write('<html><head><title>Failure!</title></head><body><h5>js::error 5015 &&syn.0</h5><p>In Quantum Mechanisms exists a quantum state known as quantum superposition - the state of being two things at once given a random subatomic event that may or may not occur.</p><p>A famous experiment by Erwin Schrödinger, a cat was placed in a box along with a poison flask that would kill the cat, only activating if a subatomic change was detected (which is completely random). The thought experiment brought forth the idea of the cat being <em>dead</em> and <em>alive</em> at the same exact time, but you aren\'t able to know which it is. So in theory, by opening the box and finding that the cat is dead, you have essentially killed the cat yourself.</p><p>Quantum Mechanics have been applied to the button you just clicked. The choice was yours on whether or not to click it, and you did not know where you would end up. You can say that it would have unlocked a new upgrade, or break the game, but since you clicked the button, you therefore must have broken the game yourself. Just like that, curiosity killed the cat. Sorry, quantum superposition is pretty terrible. Fortunately, you can click this button below to continue on your journey.</p><button onclick="var newDoc = document.open(\'text/html\', \'replace\'); newDoc.write(\'<html><head><title>Double Fail</title></head><body><p>No seriously, quantum mechanics are pretty bad. :)</p></body></html>\'); newDoc.close();">Continue</button></body></html>');
newDoc.close();
Here's where the problem starts:
</p><button onclick=\"var newDoc = document.open(\"text/html\"
^^ starting onclick ^^ ending it
var newDoc = document.open("text/html", "replace");
newDoc.write("<html><head><title>Failure!</title></head><body>Button:<button onclick=\"var newDoc = document.open("text/html", "replace"); newDoc.write("<html><head><title>Double Fail</title></head><body><p>Button clicked.</p></body></html>"); newDoc.close();\">Continue</button></body></html>");
newDoc.close();
Your quoting is bad. The generated HTML will break on ", you need to employ HTML escaping (") inside your onclick attribute, not JavaScript escaping (\") at that point.
I am working on websites that will contain adds. However, I don't want these ads to be displayed during development.
Is there any easy way to disable the Javascript code generated by Google adsense? A flag for example? Should I fiddle something in JQuery document ready? Looking for a clean and easy solution. Thanks.
You definitely could wrap the Adsense JavaScript in a conditional statement, and set a flag yourself at the top of your document if you wanted; just be sure to strip it out in your build process, or whenever you're ready to ship your code.
While this is technically possible, I would probably suggest against it. I wouldn't worry too much about screwing up your reporting or anything - as was pointed out in the comments on your question, Google isn't exactly new at this; they can determine when it's a good time to show money-making advertisements, and when it's a good time to just toss in some fillers.
Please note that I do not represent Google, and I cannot say what activity will have your account(s) with them suspended. If you wish to protect yourself from accidental clicks, I would suggest you go ahead and disable the ads while in development. Better safe than sorry.
Hi my friendly computer wizards!
I coded a simple datepicker in jQuery, the already finished packages was to heavy for my taste. I thought everything was a-ok until I noticed strange behaviour. I first decided it might have been the alcohol messing up the latency between my eyes and my brain, but when, after waking up, the problem persisted I decided to find help.
When I repeatedly click one of the arrows to change month, the script
starts to lagg behind and eventually stalls. After a while it comes
back to life. Approximately the first four or five month-changes work
as intended.
I have been trying to simplify the Date() calls to the best of my limited knowledge, but to no avail. Do I have some kind of memory leak?
I fiddled up an example that replicates the problem here (complete code): http://jsfiddle.net/DCfMj/
Any help is appreciated. It is also okay to say that I have written immensly crappy code and that I am a worthless sack of blood because of it. Constructive criticism like that builds character.
Every time you call $(...).datepicker, you're adding another click handler.
Eventually, it starts taking a long time to run all of those handlers.