How does javascript work on webpage?

So I have a program, that detects button press which works fine, and it is not in a loop. However I have a console.log() without a loop same scope as button press, and that does not log to console multiple times. How does JavaScript work on webpages then? Does on.click set a trigger? I am very confused about this, and I have tried to find answers explaining this to no avail. An explanation would be really helpful, and be very appreciated.

Can you please share your code for each situation. I don’t really understand your explanation. If you can give us your code, then we will be able to really see what is going on.

Please show us the code. Even better yet, link to a pen.

In general, you have a click event that targets the button. When you click that button, whatever is in the callback function of the click handler gets run.

But we’d need to see your code to give you more specific details.

Sorry, my bad. Here is what I am talking about:

$(document).ready(function () {
  document.getElementById("newQuote").onclick = function(){
    //dosomething
  };
  console.log(1);
}

See here when I run this, the onclick will seemingly detect right when button presses like as if it were looping, but the console.log(1) will only run once. I was wondering if all the javascript is looped through.

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard.

markdown_Forums

1 Like

Try putting the console.log(1) inside the inner function - at the end - just to see if that changes things…

Several problems.

  1. You are mixing jQuery and regular DOM. Either use the DOM or use jQuery.
  2. Look at where you have console.log. It is called when your document is ready not when the click event happens. You will need to move the console.log into the onclick function.

Thanks for all the help. I was just wondering why console.log(1) was not constantly logging to console. I was not sure if the $(document).ready function just loops continuously since the .onclick works as if it does. Console.log(1) was never supposed to be inside the .onclick function. I was just doing the console.log(1) to test if the $(document).ready function looped, which I am still unsure about. Maybe I am missing something.

The document ready just waits until the document has loaded until it runs, making sure that your JQuery doesn’t target elements in the document that haven’t been created yet. It should run almost immediately. It should run once every time you load the page, I would think.

The callback function to the clock should only run when you click the targeted element.

1 Like

Thanks, that is what I wanted to know. :slight_smile:

But Isaac makes a good point - it’s not right to use JQuery and vanilla JS to target elements. Your click function should be something like

$( "#newQuote" ).click(function() {

It reminds me of the old Alan Flusser saying, “A man that wears a belt and suspenders - that’s the definition of pessimism.”

3 Likes