我可以保存一个随机生成的var吗?这样我以后就可以用javascript调用结果了

Question

我正在做一个项目，在这个项目中我生成了一个随机var来创建随机场景。其中之一就是位置。我希望可以通过一个按钮生成一个位置。然后按下另一个按钮生成一个新的位置，当我按下第一个按钮时，我想返回我用该按钮生成的生成位置我生成位置的函数看起来像这个

function inhoudFunction()
{
var locs = ["movie", "park", "garden", "home"];
var loc = locs[Math.floor(Math.random()*locs.length)];

document.getElementById('inhoud').innerHTML="<h2>Locatie</h2>" + loc;

这些是我用来运行代码的按钮

<button type="button" onclick="introFunction()">intro</button>
<button type="button" onclick="midFunction()">mid</button>

为了知道按钮是否被按下了两次，我使用了这个代码

function introFunction(){
if (introClicked == 1){
document.getElementById('introClicked').innerHTML="<div id=inhoud></div>";
}
else{
document.getElementById('introClicked').innerHTML="<div id=inhoud></div>";
inhoudFunction();
introClickedFunction();
}

introClicked更新了这个功能

var introClicked = 0;
function introClickedFunction(){
introClicked = introClicked + 1;
}

但一旦我按下两次按钮，就什么也没回

Answer 1

将生成的值直接保存为<button>元素的自定义字段。

在下面的示例中，元素作为event.target传递给单击处理程序函数。该函数读取gen_locations字段。如果未设置，则生成随机值并进行设置。

window.addEventListener('DOMContentLoaded', _e => {
const locs = ["movie", "park", "garden", "home"];
document.getElementById('inhoud-button1').addEventListener('click', inhoudFunction);
document.getElementById('inhoud-button2').addEventListener('click', inhoudFunction);
function inhoudFunction(event) {
let genlocs = event.target.gen_locations;
if (!genlocs) {
genlocs = []
for (let i = 0; i < 2; i++) {
genlocs.push( locs[Math.floor(Math.random() * locs.length)] );
event.target.gen_locations = genlocs;
}
}
document.getElementById('inhoud').innerHTML = "<h2>Locatie</h2>" + JSON.stringify(genlocs);
}
});

<div id="inhoud"></div>
<button id="inhoud-button1">Inhound 1</button>
<button id="inhoud-button2">Inhound 2</button>

我已经通过避免内联javascript事件处理程序清理了代码。这些很糟糕！：(

编辑：改进为显示每个按钮同时存储2个生成的随机数