允许多次按下按钮

时间：2019-08-21 08:38:32

标签： javascript html css

我正在尝试为项目创建一个单词生成器，它的功能类似于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>

5 个答案:

答案 0 :(得分：1)

  • 将随机逻辑移至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>

答案 1 :(得分：0)

检索点击时的单词，不仅在页面加载时检索一次

button.addEventListener("click", function() {
    word1.textContent = leftArr[Math.floor(Math.random() * leftArr.length)];
    word2.textContent = rightArr[Math.floor(Math.random() * rightArr.length)];
    word1.setAttribute("style", "color: yellow");
    word2.setAttribute("style", "color: green");
    background1.setAttribute("style", "background-color: green");
    background2.setAttribute("style", "background-color: yellow");
  })

答案 2 :(得分：0)

您应该在按钮上创建一个事件监听器，这样每次点击都会生成新值：

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 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")

button.addEventListener("click", function() {
  word1.textContent = leftArr[Math.floor(Math.random() * leftArr.length)];
  word2.textContent = rightArr[Math.floor(Math.random() * rightArr.length)];
  word1.setAttribute("style", "color: yellow");
  word2.setAttribute("style", "color: green");
  background1.setAttribute("style", "background-color: green");
  background2.setAttribute("style", "background-color: yellow");
});
<!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>

答案 3 :(得分：0)

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")
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"

];
colour();

function colour() {
  button.addEventListener("click", function() {
var randomWordLeft = leftArr[Math.floor(Math.random() * leftArr.length)];

var randomWordRight = rightArr[Math.floor(Math.random() * rightArr.length)];
    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");
  })

}
<!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>

答案 4 :(得分：-2)

删除color（）函数，并将button.addEventListener放在全局范围内，以便侦听器捕获每次点击

相关问题
最新问题