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

Question

我正在做一个项目：制作一个随机引用（句子）生成器。我有一个函数，它根据在 html 页面的下拉菜单中选择的数字，组装报价并将报价记录到控制台 1 到 5 次。这工作正常。但是，我需要引号而不是 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

您可以h2使用document.querySelector并将其 textContent 更改为生成的 randomQuotes。document.querySelector('h2').textContent =${random1} ${random2} ${random3};