时间戳

首页 > 解决方案 > 允许多次按下按钮

javascript - 允许多次按下按钮

问题描述

我正在尝试为项目制作单词生成器，它的功能类似于此页面，每次单击按钮时，单词都会刷新。在我的代码中，它在您第一次按下按钮时起作用，但之后它就不起作用了。

有什么我遗漏的东西，任何帮助将不胜感激！

谢谢迈尔斯

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>

标签： javascripthtmlcss

解决方案

  • 将随机逻辑移动到您的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>

推荐阅读