时间戳

首页 > 解决方案 > Javascript 不更新 randomElement()

javascript - Javascript 不更新 randomElement()

问题描述

我试图在javascript中随机选择一个图像，它可以工作，但是当我点击一个按钮并且图像发生变化时，randomElement仍然和第一次工作时一样。我正在尝试使用相同的名称更新它以进行另一次随机选举，但不起作用。这是代码：

document.addEventListener('DOMContentLoaded', function() {
const catbutton=document.getElementById('catbutton')
const cubebutton=document.getElementById('cubebutton')
const image=document.getElementById('image')
var x=0
var arr= ["pr1.jpg", "pr2.jpg"]
const randomElement = arr[Math.floor(Math.random() * arr.length)];
console.log(randomElement)
image.src=(randomElement);
catbutton.onclick=function() {catfunction()};
function catfunction(){
    if (randomElement=="pr1.jpg"){
        x++;
        alert(x)
        const randomElement = arr[Math.floor(Math.random() * arr.length)];
        console.log(randomElement)
        image.src=(randomElement);
    }
    else if (randomElement=="pr2.jpg"){
        alert("Fallaste!")
    }
}
cubebutton.onclick=function() {cubefunction()};
function cubefunction(){
    if (randomElement=="pr2.jpg"){
        x++;
        alert(x)
        const randomElement = arr[Math.floor(Math.random() * arr.length)];
        console.log(randomElement)
        image.src=(randomElement);
    }
    else if (randomElement=="pr1.jpg"){
        alert("Fallaste!")
    }
}
})

标签： javascriptrandom

解决方案

在

if (randomElement=="pr1.jpg"){
    x++;
    alert(x)
    const randomElement = arr[Math.floor(Math.random() * arr.length)];
    console.log(randomElement)
    image.src=(randomElement);
}

这

const randomElement = arr[Math.floor(Math.random() * arr.length)];

是一个const 声明，对其他同名声明没有影响。

有关块作用域的解释，请参阅“JavaScript：作用域简介（函数作用域、块作用域）”。

如果删除const关键字，它将变为

if (randomElement=="pr1.jpg"){
    x++;
    alert(x)
    randomElement = arr[Math.floor(Math.random() * arr.length)];
    console.log(randomElement)
    image.src=(randomElement);
}

分配给randomElement此处声明的：

const randomElement = arr[Math.floor(Math.random() * arr.length)];

然后您会遇到问题，因为您只能分配一次const声明。您应该将其更改为let允许您在按钮处理程序运行时分配新值的声明。

document.addEventListener('DOMContentLoaded', function() {
const catbutton=document.getElementById('catbutton')
const cubebutton=document.getElementById('cubebutton')
const image=document.getElementById('image')
var x=0
var arr= ["pr1.jpg", "pr2.jpg"]
let randomElement = arr[Math.floor(Math.random() * arr.length)];
console.log(randomElement)
image.src=(randomElement);
catbutton.onclick=function() {catfunction()};
function catfunction(){
    if (randomElement=="pr1.jpg"){
        x++;
        alert(x)
        randomElement = arr[Math.floor(Math.random() * arr.length)];
        console.log(randomElement)
        image.src=(randomElement);
    }
    else if (randomElement=="pr2.jpg"){
        alert("Fallaste!")
    }
}
cubebutton.onclick=function() {cubefunction()};
function cubefunction(){
    if (randomElement=="pr2.jpg"){
        x++;
        alert(x)
        randomElement = arr[Math.floor(Math.random() * arr.length)];
        console.log(randomElement)
        image.src=(randomElement);
    }
    else if (randomElement=="pr1.jpg"){
        alert("Fallaste!")
    }
}
})

推荐阅读