我正在尝试用单词创建一个随机短语生成器。我的问题是获取一个新短语。我必须先刷新页面,然后它会创建一个新的短语。我希望它在不刷新整个页面的情况下生成短语,或者至少用我的代码中的相同按钮生成和刷新。
var output = "hai " + randomBodyPart + " come un " + randomWord + " " + randomAdjective + "!";
//Pagereloder
function myFunction() {
location.reload();
}
//Genretor Button
var button = document.querySelector("button");
button.addEventListener("click", function() {
(document.getElementById("viewer").innerHTML= output);
});
这是HTML
<article>
<header>
<h1>Random word Genretor</h1>
<p class="gen-button"><button class="btn">Click me</button><button class="btn" onclick="myFunction()">Relod</button></p>
<h2 id="viewer">Here</h2>
</header>
<button id="myButton">Click to change the number</button>
<span id="randomNumber"></span>
<script type="text/javascript">
(function(d) {
var button = d.getElementById("myButton");
var textNumber = d.getElementById("randomNumber");
button.addEventListener("click", function(evt) {
textNumber.innerHTML = _randomNumber();
});
var _randomNumber = function() {
return Math.floor((Math.random() * 10) + 1);
}
})(document);
</script>
- 为随机文本创建按钮和容器
- 捕捉这两个元素
- 向按钮添加侦听器
- 当有人单击您想要更改innerHtml的按钮时,请在回调中进行更改
- 我用随机数更改innerHtml。。。这是一个例子(右=(
- 参数之所以存在,是因为如果你想对事件做其他事情,如果你想的话,你可以删除它
- 我也给你一只兔子:
- (|_/(
- (#.*(
- c("(("(
- 享受吧
将代码放入一个函数中,并通过按钮调用该函数:
function myFunction() {
var output = "hai " + randomBodyPart + " come un " + randomWord + " " + randomAdjective + "!";
document.getElementById("viewer").innerHTML= output
}
//Genretor Button
var button = document.querySelector("button");
button.addEventListener("click", function() {
myFunction();
});
此外,随机生成器也必须在函数内部。