javascript - 如何输出 javascript 函数在网页下拉菜单中选择的次数？

Question

我正在开发一个项目:制作随机引用(句子)生成器。我有一个函数，可以组装报价并将报价记录到控制台 1 到 5 次，具体取决于 html 页面下拉菜单中选择的数字。这很好用。但是，我需要以与在控制台中相同的方式在网页上显示引号，而不是 console.log。

我不知道该怎么做。我是 Javascript 新手，所以我的理解有限。

//HTML drop down 

<select name ="quote_num" id="quote_num" onclick="getNumber()">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
</select>
<h2>The oracles of wisdom say:</h2>
     <button onclick="michael_quote()">Reveal</button>



//JavaScript 

getNumber();

var numbaValue

function getNumber() {
var numbaElement = document.getElementById("quote_num");
numbaValue = numbaElement.options[numbaElement.selectedIndex].text;
console.log(numbaValue);
}


//Assembling the quote
function michael_quote() {

for (i = 0; i < numbaValue; i++) {

    var subjects = [...];
    var verbs = [...]; 
    var objects = [...];

    var random1 = subjects[Math.floor(Math.random() * subjects.length)];
    var random2 = verbs[Math.floor(Math.random() * verbs.length)];
    var random3 = objects[Math.floor(Math.random() * objects.length)];

    console.log(random1 + " " + random2 + " " + random3);

    }
}

Answer 1

你可以这样做:

• 创建一个 ID 为 revealed_text 的新 HTML 元素
• 创建变量 var text_to_reveal;外michael_quote()功能。
• 在您初始化的函数内 text_to_reveal带有空字符串 ""
• 在控制台日志(或代替它)之后，您执行 text_to_reveal += (random1 + " " + random2 + " " + random3 + "<br>");
• 循环结束后，您将执行:document.getElementById("revealed_text").innerHTML = text_to_reveal;它将您保存的文本放入 ID 为 revealed_text 的 HTML 元素中我们之前创建的。
• 完成

getNumber();

var numbaValue

function getNumber() {
  var numbaElement = document.getElementById("quote_num");
  numbaValue = numbaElement.options[numbaElement.selectedIndex].text;
  //console.log(numbaValue);
}


var text_to_reveal;
//Assembling the quote
function michael_quote() {
  text_to_reveal = "";

  for (i = 0; i < numbaValue; i++) {

    var subjects = ["Tree", "House"];
    var verbs = ["go", "dive"];
    var objects = ["aaaa", "bbbb"];

    var random1 = subjects[Math.floor(Math.random() * subjects.length)];
    var random2 = verbs[Math.floor(Math.random() * verbs.length)];
    var random3 = objects[Math.floor(Math.random() * objects.length)];

    //console.log(random1 + " " + random2 + " " + random3);
    text_to_reveal += (random1 + " " + random2 + " " + random3 + "<br>");
  }
  
  document.getElementById("revealed_text").innerHTML = text_to_reveal;
}

<select name="quote_num" id="quote_num" onclick="getNumber()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<h2>The oracles of wisdom say:</h2>
<button onclick="michael_quote()">Reveal</button>

<div id="revealed_text"></div>