Help placing this function inside a tag

Im trying to figure out how to get this random quote function to work inside a div or a p tag. I found the function on google, but I want to figure out how to get it to run wherever I want it to instead of at the very top of my page. Ive been looking at a few beginner tutorials that have got close to explaining how to do this but I can’t get it to work for me… I know that inside the function, it has a ‘document.write’ and im guessing that’s what’s causing it to write at the top of my page but Im having trouble figuring out what I can replace that with to get it to execute the way I want.

If you look at my HTML, I created an empty

tag at the end of my body that I want the function to run in. Ive tried doing:

document.getElementById(“quote”).innerHTML=

and calling the function this way but no luck. What am I doing wrong? Why isn’t this working? Can someone please explain this to me so that I can understand and learn how to get functions to associate within specific tags?

https://codepen.io/TuscannyCodes/pen/eYBrzPw

eventually I want to make a quote button that can generate a bunch of random quotes using an ‘onClick’

  writeRandomQuote = function () {
    var quotes = new Array();
    quotes[0] = "Action is the real measure of intelligence.";
    quotes[1] = "Baseball has the great advantage over cricket of being sooner ended.";
    quotes[2] = "Every goal, every action, every thought, every feeling one experiences, whether it be consciously or unconsciously known, is an attempt to increase one's level of peace of mind.";
    quotes[3] = "A good head and a good heart are always a formidable combination.";
    var rand = Math.floor(Math.random()*quotes.length);
    document.write(quotes[rand]);
    return rand
  
  }

// want to place random quote in a specific div. 

document.getElementById("quote").innerHTML= writeRandomQuote()

What was happening is that you never returned the quote or assigned it to the HTML element. I put an example that prints random quote on load but didn’t implement any further features.

Hope this helps

2 Likes

Do you want that to happen when the page is first loaded? When a button is clicked? Is this a one-time thing, something you’d like to happen periodically, or?

So the .innerHTML = is one of two ways to simply “inject” content into an element (you can also use .textContent, if your content is pure text without HTML elements), but it seems to be a two-part question.

  • First, how can you get the quote out of your function?
  • Second, how can you get that quote value into the DOM node?

I might suggest taking a look at your random quote function, and see what that is returning, as that return value, from the looks of things, is what you want to somehow place in the DOM node.

1 Like

Yes, I assigned it before, but I took it off because I assumed it was the wrong method because it wasn’t working. I left the other remaining part of the code just to demonstrate what method I was trying to do! :sweat_smile:

So the return is what makes the assignment work in this situation :thinking:? hahaha wow im confused. I guess I haven’t fully got an understanding of how returns work yet! Can you please explain how the return rand plays a roll in all of this? I would assume that the code should run as expected without a return.

Returning values from functions is an essental concept to grasp. The function does the calculation for you and returns what you expected. This means when you call the function elsewhere you will get that return value back in it’s place. This means you can use that function multiple times to get multiple quotes back.

1 Like

Well, the button part is just for the future. Im not really working on that part just yet. Im just focusing my attention on how to move the random quote into an HTML element. I was just mentioning it to bring up what I would eventually like to be able to do.

but on to the first bullet point… would I even have to move the quotes out of the function? I was under the perspective that I could just move the entire function and have it executing inside a div or a p tag.

for the button to work you would need to insert that html ID bind into a function so you can call it rather then being a run once type thing

1 Like

Ok I see, so In this case, im needing to return the function so that I can use that function in the first place? Am I understanding that correctly?

basically a function without a return is… more or less, operational only in the script file but can’t necessarily be used on DOM elements without being returned?

(sorry if im butchering that, trying to wrap my mind around it. )

well if you wanted you could have a global variable and have that function set that variable rather then returning a value. In my opinion this makes it a little more complex than it needs to be and at least with a return value you have a way to validate the functions execution if you want.

1 Like

So here’s the thing. Every function, every function in javascript? it returns something. In this case, yours doesn’t actually say what it returns, so it returns undefined.

But what do you think you’d need to do within your function in order to return a value, instead of document.write-ing a value?

1 Like

Wow that explains why ive been getting ‘undefined’ when I console.log :sweat_smile: makes sense now. So I need to return to give it an actual value!

var rand = Math.floor(Math.random()*quotes.length);
document.write(quotes[rand]);
return rand

I know that this is because im just now understanding returns and i’ll need to really get a better understanding of how they work but, why is the return here focused on the rand ? Seems like a non-paticular portion of the code block. Why that value?

Got it! Thank you! im going to watch a few videos on returns and keep this in mind. This was something that Ive seen come up but never grasped. Now its making much more sense.

but is it rand that you want your function to return (the number), or quotes[rand] (the actual randomly-selected quote? I’d get rid of the document.write entirely, it’s outdated and it’s a side-effect you don’t need.

1 Like

yes I wasn’t even paying attention to that and it’s also redundant to the function now.

I don’t know what’s going on at all. Its still not working and I can’t get it to work.

its frustrating because even when I :

document.getElementById(“quote”).innerHTML =

and input a random string value it will not display that value in the dom. so I really have no idea what is going on.

I just did it using the browser console and it worked just fine. Be sure to leave your problems in codepen so we can see exactly what you are trying to do.

1 Like

Just looked at your Codepen. Your function is currently returning a number between 0 (inclusive) and less than quote.length. You should be returning a quote not an array index.

1 Like

Thanks for your help!

Im trying to return the array and not a single quote because I want to generate a random quote from my array and not any one specific quote. So I figured I should be utilizing an array with math applied to it.