我正在开发一个项目:制作随机引用(句子)生成器。 我有一个函数,可以组装报价并将报价记录到控制台 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);
}
}
最佳答案
你可以这样做:
- 创建一个 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>
关于javascript - 如何输出 javascript 函数在网页下拉菜单中选择的次数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56516046/