How to run a Javascript function with onclick

Question

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Quote generator</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <h1 class = "quotes">Quotes</h1>
  <img src ="https://placeimg.com/1100/300/nature" alt="nature" class="nature">
  <div id = "output">

  </div>
  <script type ="text/javascript" src="js/student_report.js"></script>
 <button onclick="print(blank)">Click me</button>
 </body>
</html

> Blockquote


function print(message) {   var output =
document.getElementById('output');   output.innerHTML = message; }

Blockquote

var blank = "";


function print(message) {
  var output = document.getElementById('output');
  output.innerHTML = message;
}

function getQuote(array) {
  var quotes =  '<h2 class="quote">' + 'quote: ' + array.quote + '</h2>';
      quotes +=  '<p class="source">' + 'Soure: ' + array.source + '</p>';
      quotes += '<p class="year">' + 'year: ' + array.year + '</p>';
      quotes += '<p class="citation">' + 'citation: ' + array.citation + '</p>';
      return quotes
};





> 

var quotes = [{
  quote: "Great man", source: "jack mike", year: 1990, citation: "movie"},
              { quote: "Good stuff", source:"Mac jones", year: 1989, citation: "book"},
              { quote: "i love you", source: "mom and dad", year: 1993, citation: "love"},
              {quote: "you're a hero", source: "hero man", year: 2020, citation: "future"},
              {quote: "you're a wizard", source: "hero wizard", year: 2022, citation: "future4"},
               {quote: "you're a man", source: "hero man33", year: 2025, citation: "future3"},
               {quote: "you're a good person", source: "hero person", year: 2021, citation: "future2"},
               {quote: "you're a web developer", source: "hero developer", year: 2026, citation: "futures"}
              ];

var i = Math.round(Math.random() * quotes.length - 1);
blank += getQuote(quotes[i]);
print(blank);

function timer(){
 setInterval(print(blank), 3000);

}
timer();

So here I need to link that print function to the onclick so that when I click the button, it keeps printing out that message to the page in the same spot. It's a random quote generator code so what I want is it prints random quotes to the page when i click the button.

When I load the page everything loads as it should, but when I click the button NOTHING happens, just clicks and that's it.

IGNORE THE QUOTES TEXT its stupid dumb stuff long story, i would never use those quotes for a actual website

Sorry if I gave a bad description, as you can see I'm new to coding.

Thank you for the help!

Can you post the javascript as well? Without seeing the js it's difficult to diagnose. — Jonhasacat
– Jonhasacat, Commented Dec 21, 2018 at 1:27

Jack Bashford · Accepted Answer · 2018-12-21 01:39:06Z

3

The problem is when you're calling your function from the onclick attribute here:

<button onclick="print(blank)">Click me</button>

You would have seen an error in the JavaScript console saying this when you clicked the button:

ReferenceError: Can't find variable: blank

If you want to print blank, you'll need quotation marks around the string you want to print. You can either use single quotation marks like so:

<button onclick="print('blank')">Click me</button>

Or you can use escaped double quotes like this:

<button onclick="print(\"blank\")">Click me</button>

edited Dec 21, 2018 at 1:39

answered Dec 21, 2018 at 1:26

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jay Over a year ago

i did that but it only printed the word "blank" to the page, i can link my JS file if that helps

Charles Loder · Accepted Answer · 2018-12-21 01:37:13Z

1

Is the print() function defined in the student_report.js file? If not, you have to also define the function in a <script> tag. And like said already, the "blank" variable has to be in a global scope.

answered Dec 21, 2018 at 1:37

Charles Loder

859 bronze badges

2 Comments

Jay Over a year ago

How would I define it with a script tag?

Jay Over a year ago

I also added my JS script just now, to help with my question.

ic3b3rg · Accepted Answer · 2018-12-21 02:57:01Z

The argument in the javascript file is called blank

Not sure what you mean there. If you're trying to pass a variable, it would have to be in global scope

Edit:

ok, it looks like the problem is that you're expecting print(blank) to change the quote displayed in the output div but print only changes the innerHTML of the div, it doesn't change blank, here's your code with a console.log in print to show that print is called.

var blank = "";

function print(message) {
  console.log('here')
  var output = document.getElementById('output');
  output.innerHTML = message;
}

function getQoute(array) {
  var qoutes =  '<h2 class="qoute">' + 'qoute: ' + array.qoute + '</h2>';
      qoutes +=  '<p class="source">' + 'Soure: ' + array.source + '</p>';
      qoutes += '<p class="year">' + 'year: ' + array.year + '</p>';
      qoutes += '<p class="citation">' + 'citation: ' + array.citation + '</p>';
      return qoutes
};

var qoutes = [{
  qoute: "Great man", source: "jack mike", year: 1990, citation: "movie"},
              { qoute: "Good stuff", source:"Mac jones", year: 1989, citation: "book"},
              { qoute: "i love you", source: "mom and dad", year: 1993, citation: "love"},
              {qoute: "you're a hero", source: "hero man", year: 2020, citation: "future"},
              {qoute: "you're a wizard", source: "hero wizard", year: 2022, citation: "future4"},
               {qoute: "you're a man", source: "hero man33", year: 2025, citation: "future3"},
               {qoute: "you're a good person", source: "hero person", year: 2021, citation: "future2"},
               {qoute: "you're a web developer", source: "hero developer", year: 2026, citation: "futures"}
              ];

var i = Math.round(Math.random() * qoutes.length - 1);
blank += getQoute(qoutes[i]);
print(blank);

function timer(){
 setInterval(print(blank), 3000);

}
timer();

  <h1 class = "qoutes">Qoutes</h1>
  <img src ="https://placeimg.com/1100/300/nature" alt="nature" class="nature">
  <div id = "output">

  </div>
  <script type ="text/javascript" src="js/student_report.js"></script>
 <button onclick="print(blank)">Click me</button>

Here's an update to your code that updates the quote and fixes a bunch of other stuff:

const quotes = [
  { quote: "Great man", source: "jack mike", year: 1990, citation: "movie" },
  { quote: "Good stuff", source:"Mac jones", year: 1989, citation: "book" },
  { quote: "i love you", source: "mom and dad", year: 1993, citation: "love" },
  { quote: "you're a hero", source: "hero man", year: 2020, citation: "future" },
  { quote: "you're a wizard", source: "hero wizard", year: 2022, citation: "future4" },
  { quote: "you're a man", source: "hero man33", year: 2025, citation: "future3" },
  { quote: "you're a good person", source: "hero person", year: 2021, citation: "future2" },
  { quote: "you're a web developer", source: "hero developer", year: 2026, citation: "futures" }
];

function changeQuote() {
  const i = Math.floor(Math.random() * quotes.length);
  document.getElementById('output').innerHTML = getQuote(quotes[i]);
}

function getQuote({quote, source, year, citation}) {
  return `
    <h2 class="quote">quote: ${quote}</h2>
    <p class="source">soure: ${source}</p>
    <p class="year">year: ${year}</p>
    <p class="citation">citation: ${citation}</p>`;
};

changeQuote();

  <h1 class = "quotes">Quotes</h1>
  <img src ="https://placeimg.com/1100/300/nature" alt="nature" class="nature">
  <div id = "output">

  </div>
  <script type ="text/javascript" src="js/student_report.js"></script>
 <button onclick="changeQuote()">Click me</button>

OH MY GOSH thank you! I don't know Const yet, i'll learn that next in my course. But you pointed out the fact that my print didn't CHANGE anything, it just printed the same thing because the value in print was always the same, i needed to add to the function to make it so it would change, thank you!

Karthik Sekar · Accepted Answer · 2018-12-21 01:40:42Z

0

replace below code instead of your existing button code

<button onclick="print('blank')">Click me</button>

when you send string to a function you have to use single/double quotes otherwise it will consider as js variable.

answered Dec 21, 2018 at 1:40

Karthik Sekar

6374 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to run a Javascript function with onclick

4 Answers 4

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related