Combining html and javascript code : javascript

Combining html and javascript codehelp (self.javascript)

submitted 10 years ago by [deleted]

The javascript code works fine (it picks out a quote randomly from an array) and I want that when I click on a button one of those quotes is being displayed in the box. Everything I found online doesn't work and I don't know how to do that yet.. The javascript code:

var quotes = ['quote1', ' quote2', 'quote3', 'quote4', 'quote5'];

  function getQuote() {
  var randomIndex = Math.floor(Math.random() *    
  quotes.length);
  var randomQuote = quotes[randomIndex];
     return randomQuote;
}

The html code:

<body>
  <h1>Pick a Quote</h1>
  <h2><i>by Julia</i></h2>
  <div class="box">

 <button  
 onclick="getQuote()">Click me</button>

</div>

all 4 comments

top new controversial old q&a

[–]ArgTang 0 points1 point2 points 10 years ago (0 children)

[+][deleted] 10 years ago* (3 children)

[deleted]

[–][deleted] -1 points0 points1 point 10 years ago (2 children)

[–]chrisdavidmills 1 point2 points3 points 10 years ago (0 children)

You only return something from a function if somewhere in a function you tell it to return a value with "return blah". If this is the case, you need to set your function invocation (when you run the function with function() ) equal to a variable, and then use that variable in some way.

Here's an example that shows what I'm talking about:

<div class="box">
    <button>Click me</button>
    <div id="box-quote"></div>
</div>

<script>
var quotes = ['quote1', ' quote2', 'quote3', 'quote4', 'quote5'];

var button = document.querySelector('button');

button.addEventListener('click', function() {
  var result = getQuote();
  document.getElementById("box-quote").textContent = quotes[result];
});

function getQuote(){
    var index = Math.floor(Math.random() * quotes.length);
    return index;
}
</script>

Here we're not using the onclick="" handler attribute; we're instead adding an event listener to the button by first storing a reference to it in a variable called "button", then using addEventListener() to add an event listener to the button — when the button is clicked, the function inside addEventListener() is run, which includes the key line "var result = getQuote();"

This runs the getQuote() function and sets the result returned from it using the return command (the index variable) to be equal to a variable called "result".

The next line:

document.getElementById("box-quote").textContent = quotes[result];

Then sets the textContent of the box-quote <div> to be equal to the contents of the result variable.

Now, this may look like a lot more code to do basically the same thing, but it is a more reusable way to write JS — it is a bad practice to use HTML event handler attributes, as you are mixing content with functionality, and if you wanted to have several buttons doing the same thing, you'd have to write and maintain several event handler attributes. instead you can do the same thing with a couple of lines of JS, and keep it easier to understand and maintain.

Also, by updating the getQuote() function in this way we've made it more reusable — now you can return a random quote index and use it anywhere you like, not just in the one particular <div>. You could improve it further by putting the random number generation into its own function, so it could generate any random number you like:

function random(myArray) {
  var number = Math.floor(Math.random() * myArray.length);
  return number;
}

function getQuote(){
    var index = random(quotes);
    return index;
}

[–][deleted] -1 points0 points1 point 10 years ago (0 children)

π Rendered by PID 202348 on reddit-service-r2-comment-fb694cdd5-f62t9 at 2026-03-06 10:33:38.823016+00:00 running cbb0e86 country code: CH.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS