我正在尝试为一个元素制作一个单词生成器，它的功能类似于 this page每次单击按钮时，单词都会刷新。在我的代码中，它在您第一次按下按钮时起作用，但之后它就不起作用了。
有什么我遗漏的吗，我们将不胜感激!
谢谢 英里
var background1 = document.querySelector(".outer-1");
var background2 = document.querySelector(".outer-2");
var word1 = document.querySelector(".inner-1");
var word2 = document.querySelector(".inner-2");
var button = document.querySelector(".button")
colour();
function colour() {
button.addEventListener("click", function() {
word1.textContent = randomWordLeft;
word2.textContent = randomWordRight;
word1.setAttribute("style", "color: yellow");
word2.setAttribute("style", "color: green");
background1.setAttribute("style", "background-color: green");
background2.setAttribute("style", "background-color: yellow");
})
}
var leftArr = [
"WHISKEY",
"GIN",
"VODKA",
"APEROL",
"CAMPARI",
"LAGER",
"ALE",
"WINE",
"MEZCAL",
"TEQUILA",
"PIZZA",
"FRIED CHICKEN",
"TOAST",
"ICE CREAM",
"CHIPS",
"STEAK",
"SALMON",
"CAVIAR",
"SUSHI",
"PEANUT BUTTER",
"MAYONAISE",
"KETCHUP",
"MARMITE"
];
var rightArr = [
"MUSTARD",
"SOYA SAUCE",
"WASABI",
"SEAWEED",
"TURMERIC",
"VOLCANIC ASH",
"WATER LILY SEEDS",
"SCOTCH BONNET",
"BIRDS EYE CHILLI",
"HIMALAYAN PINK SALT",
"CHARCOAL",
"KOMBUCHA",
"MATCHA TEA",
"COLA",
"MOON MILK",
"MILKSHAKE",
"MORINGA",
"DRAGON FRUIT",
"JACK FRUIT",
"GUAVA",
"DURIAN",
"LYCHEE",
"BLUE JAVA"
];
var randomWordLeft = leftArr[Math.floor(Math.random() * leftArr.length)];
var randomWordRight = rightArr[Math.floor(Math.random() * rightArr.length)];<!DOCTYPE html>
<html>
<head>
<title>Gen2</title>
<link href="https://fonts.googleapis.com/css?family=Lato:900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div class="title">
<div class="header-1">Mash Made </div>
<div class="header-2">in heaven</div>
</div>
<div class="outer-1">
<div class="inner-1">Toast</div>
</div>
<div class="outer-2">
<div class="inner-2">Gin</div>
</div>
<button class="button">Mash!</button>
<script type="text/javascript" src="script.js"></script>
</body>
</html>最佳答案
- 将随机逻辑移动到您的
colour函数中。别等了，改用randomText吧! - 从函数中删除点击处理程序
- 将函数名称传递给点击处理程序
button.addEventListener('click', randomText) - 初始化
randomText() - 使用
style.cssText = 'cssString'轻松设置样式(或者更确切地说使用 CSS 样式)
var w1 = ["WHISKEY", "GIN", "VODKA", "APEROL", "CAMPARI", "LAGER", "ALE", "WINE", "MEZCAL", "TEQUILA", "PIZZA", "FRIED CHICKEN", "TOAST", "ICE CREAM", "CHIPS", "STEAK", "SALMON", "CAVIAR", "SUSHI", "PEANUT BUTTER", "MAYONAISE", "KETCHUP", "MARMI"];
var w2 = ["MUSTARD", "SOYA SAUCE", "WASABI", "SEAWEED", "TURMERIC", "VOLCANIC ASH", "WATER LILY SEEDS", "SCOTCH BONNET", "BIRDS EYE CHILLI", "HIMALAYAN PINK SALT", "CHARCOAL", "KOMBUCHA", "MATCHA TEA", "COLA", "MOON MILK", "MILKSHAKE", "MORINGA", "DRAGON FRUIT", "JACK FRUIT", "GUAVA", "DURIAN", "LYCHEE", "BLUE JAVA"];
var randArr = arr => arr[~~(Math.random() * arr.length)];
var word1 = document.querySelector(".inner-1");
var word2 = document.querySelector(".inner-2");
var button = document.querySelector(".button")
word1.style.cssText = 'color: yellow; background: green;'; // Is JS really needed?
word2.style.cssText = 'color: green; background: yellow;';
function randomText() {
word1.textContent = randArr(w1);
word2.textContent = randArr(w2);
}
button.addEventListener("click", randomText); // On click
randomText(); // and on init<div class="title">
<div class="header-1">Mash Made </div>
<div class="header-2">in heaven</div>
</div>
<div class="outer-1">
<div class="inner-1">Toast</div>
</div>
<div class="outer-2">
<div class="inner-2">Gin</div>
</div>
<button class="button">Mash!</button>关于javascript - 允许多次按下按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57587608/