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();

因此，在这里我需要将该打印功能链接到onclick，以便当我单击该按钮时，它将继续将该消息打印到同一位置的页面上。这是一个随机报价生成器代码，所以我想要的是当我单击按钮时它将随机报价打印到页面上。

当我加载页面时，一切都会按原样加载，但是当我单击“什么都没有”按钮时，只需单击即可。

忽略报价文本是愚蠢的东西，说实话，我永远不会在实际网站中使用这些报价

很抱歉，我给的描述不好，因为您可以看到我是编码新手。

谢谢您的帮助！

Answer 1

问题是当您从此处的onclick属性调用函数时：

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

当您单击按钮时，您会在JavaScript控制台中看到这样的错误：

ReferenceError：找不到变量：blank

如果要打印blank，则需要在要打印的字符串两边加上引号。您可以使用单引号，如下所示：

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

或者您可以使用转义的双引号：

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

Answer 2

javascript文件中的参数称为空白

不确定您的意思。如果您尝试传递变量，则必须在全局范围内

编辑：

好的，看来问题是您期望print(blank)更改output div中显示的报价，但是print仅更改了innerHTML div，它不会更改blank，这是您的代码，其中在console.log中带有print，以显示print被调用。

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>

这是您代码的更新，可以更新报价并修复其他问题：

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>

Answer 3

print()文件中是否定义了student_report.js函数？如果不是，则还必须在<script>标记中定义函数。就像已经说过的那样，“空白”变量必须在全局范围内。

Answer 4

替换下面的代码，而不是现有的按钮代码

func getKind(v interface{}) string {

    rt := reflect.TypeOf(v)
    switch rt.Kind() {
    case reflect.Slice:
        return "slice"
    case reflect.Array:
        return "array"
    default:
        return "unknown"
    }

}

func FlattenDeep(args ...interface{}) []interface{} {
    list := []interface{}{}

   for _, v := range args {

     kind := getKind(v);

     if kind != "unknown" {
        list = append(list, FlattenDeep(v)...)  // does not compile
     } else{
        list = append(list, v);
       }
    }
   return list;
}

将字符串发送给函数时，必须使用单引号/双引号，否则它将被视为js变量。

如何使用onclick运行Javascript函数

4 个答案: