我无法获取此html代码来显示我想要的内容

所以我正在制作一款电子游戏。我现在想让它做的就是，当你点击按钮时，它应该从列表中随机选择一个名称，并将其显示在按钮下(我将添加基本相同的东西，但更改列表中的内容(，但我不知道如何让它显示在屏幕上。这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF=8">
<title>Skull picker v3.2</title>
<style>
*{padding:0;margin:0}
canvas {background:#ffffff;display:block;margin:0 auto}
</style>
</head>
<body>
<h1>The Halo Skull Picker</h1>
<p>This is the first version of the Halo skull picker. Click the button below and it *should* give you a random selection of skulls to enable, if nothing shows up that would be no skulls</p>
<p>Also as I further inprove this there will be options for every halo game</p>
<button onclick="myFunction()">MCC Halo: CE Anniversary</button>
<script>
var words = ['Anger',
'Black Eye',
'Blind',
'Catch',
'Eye Patch',
'Famine',
'Fog',
'Foreign',
'Iron',
'Mythic',
'Recession',
'Thats just...Wrong',
'Thunderstorm',
'Tough luck',
'Bandanna',
'Boom',
'Ghost',
'Grunt Birthday Party',
'Grunt Funeral',
'Malfunction',
'Pinata',
'Sputnik',
];
function myFunction() {
return arr[Math.floor(Math.random() * arr.length)];
}
for(var x=0; x<20, x++)
console.log(randomword(words));

</script>
</body>
</html>

您应该创建一个容器或任何其他标记来显示单词。然后，从脚本中进行查询，并向innerHTML提供一个随机单词。

let words = [
`random`,
`words`,
`on`,
`demand`
];
const wordDisplay = document.querySelector("#word-display");
const randomIndex = max => Math.floor(Math.random() * max);
const getRandom = arr => arr[randomIndex(arr.length)];
const showWord = () => {
const word = getRandom(words);
wordDisplay.innerHTML = word;
};

body {
margin: 0;
padding: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./script.js" defer></script>
<title>Test purposes</title>
</head>
<body>
<h1>The Halo Skull Picker</h1>
<p>This is the first version of the Halo skull picker. Click the button below and it *should* give you a random selection of skulls to enable, if nothing shows up that would be no skulls</p>
<p>Also as I further inprove this there will be options for every halo game</p>
<button onclick="showWord()">MCC Halo: CE Anniversary</button>
<div id="word-display"></div>
</body>
</html>

有两件事。重要的是要推迟脚本运行，以便能够在呈现HTML元素后提取它。我将脚本编码为ES6。这就是你如何编码为ES5:

var words = [
'random',
'words',
'on',
'demand'
]
var wordDisplay = document.querySelector("#word-display");
function randomIndex(max) {
return Math.floor(Math.random() * max);
} 
function getRandom(arr) {
return arr[randomIndex(arr.length)];
} 
function showWord() {
var word = getRandom(words);
wordDisplay.innerHTML = word;
}

试试这个：

var words = ['Anger',
'Black Eye',
'Blind',
'Catch',
'Eye Patch',
'Famine',
'Fog',
'Foreign',
'Iron',
'Mythic',
'Recession',
'Thats just...Wrong',
'Thunderstorm',
'Tough luck',
'Bandanna',
'Boom',
'Ghost',
'Grunt Birthday Party',
'Grunt Funeral',
'Malfunction',
'Pinata',
'Sputnik',
];
function myFunction() {
let idx =  Math.floor(Math.random() * words.length);

var element=document.getElementById('here');
console.log(words[idx]);
element.innerHTML=words[idx];
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF=8">
<title>Skull picker v3.2</title>
<style>
*{padding:0;margin:0}
canvas {background:#ffffff;display:block;margin:0 auto}
</style>
</head>
<body>
<h1>The Halo Skull Picker</h1>
<p>This is the first version of the Halo skull picker. Click the button below and it *should* give you a random selection of skulls to enable, if nothing shows up that would be no skulls</p>
<p>Also as I further inprove this there will be options for every halo game</p>
<button onclick="myFunction()">MCC Halo: CE Anniversary</button>
<div id='here'></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF=8">
<title>Skull picker v3.5</title>
<style>
*{padding:0;margin:0}
canvas {background:#ffffff;display:block;margin:0 auto}
</style>
</head>
<body>
<h1>The Halo Skull Picker</h1>
<p>This is the first version of the Halo skull picker. Click the button below and it *should* give you a random selection of skulls to enable, if nothing shows up that would be no skulls</p>
<p>Also as I further inprove this there will be options for every halo game</p>
<button onclick="myFunction()">MCC Halo: CE Anniversary</button>
<button onclick="myFunction1">addon test</button>
<p id="jack"></p>
<script>
var words = ['Anger',
'Black Eye',
'Blind',
'Catch',
'Eye Patch',
'Famine',
'Fog',
'Foreign',
'Iron',
'Mythic',
'Recession',
'Thats just...Wrong',
'Thunderstorm',
'Tough luck',
'Bandanna',
'Boom',
'Ghost',
'Grunt Birthday Party',
'Grunt Funeral',
'Malfunction',
'Pinata',
'Sputnik',
];
var words1 = ['Anger',
'Black Eye',
'Blind',
'Catch',
'Eye Patch',
'Famine',
'Fog',
'Foreign',
'Iron',
'Mythic',
'Recession',
'Thats just...Wrong',
'Thunderstorm',
'Tough luck',
'Bandanna',
'Boom',
'Ghost',
'Grunt Birthday Party',
'Grunt Funeral',
'Malfunction',
'Pinata',
'Sputnik',
];
function myFunction() {
num = Math.floor((Math.random() * words.length));
document.getElementById('jack').innerHTML+=words[num]+'<br>'
}
function myFunction1() {
num = Math.floor((Math.random() * words1.length));
document.getElementById('jack').innerHTML+=words1[num]+'<br>'
}       
</script>
</body>

在朋友的帮助下，我设法让它显示出我想要的答案，但遗憾的是，现在当我试图将它复制到一个有不同列表的不同按钮时，不幸的是它不起作用，所以第一个问题解决了，但第二个问题不是

相关内容

最新更新

热门标签：