到目前为止，我有以下代码。
var random = Math.floor(Math.random() * texts.length);
var currentText = random;
document.getElementById('text').innerHTML = texts[random];
因此，每次更新 HTML 页面时，都会从数组中选择一个随机文本。我在代码中也有一个 slider 。
<input type="range" min="0" max="1" step="0.001" value="0" class="slider" id="wordSlider">
最后，我有另一个文本数组，每个文本都是前一个数组文本在各自索引处的延续。我想要做的是将文本从初始数组更新为特定范围值的新数组，例如 0.5。我怎样才能做到这一点？我尝试使用条件语句，但代码似乎只在运行时检查一次变量值。
编辑: 我正在努力完成的一个例子:
<script>
(function getText() {
var texts = ["Text 1 Part 1", "Text 2 Part 1", "Text 3 Part 1"];
var texts2 = ["Text 1 Part 2", "Text 2 Part 2", "Text 3 Part 2"];
var random = Math.floor(Math.random() * texts.length);
var currentText = random;
document.getElementById('text').innerHTML = texts[currentText];
})();
</script>
页面可能会随机选择 texts 数组中的第一个文本。一旦 slider 达到 0.5，文本将变为“故事 1 部分 2”，第二个数组中具有相同索引的文本。
编辑 2: 如果有人想知道，这是我的最终解决方案(归功于@SomoKRoceS)
脚本标签:
<script>
const texts = [
["Text 1 Part 1", "Text 1 Part 2", "Text 1 Part 3"],
["Text 2 Part 1", "Text 2 Part 2", "Text 2 Part 3"],
["Text 3 Part 1", "Text 3 Part 2", "Text 3 Part 3"]
];
const random = Math.floor(Math.random() * texts.length);
const currentText = random;
<!-- The text currently displayed -->
var displayed = document.getElementById("text");
function getText(part) {
displayed.innerHTML = texts[currentText][part];
}
<!-- Get the first (index 0) of a random set of texts -->
getText(0);
</script>
在 slider 所在的 div 中，我添加了:
<script>
slider.addEventListener("input", (e) => {
if(e.target.value > 0.25 && e.target.value < 0.5) {
getText(1);
} else if (e.target.value >= 0.5) {
getText(2);
} else {
getText(0);
}
});
</script>
最佳答案
需要监听 slider 的变化事件，像这样:
var slideElem = document.getElementById("wordSlider");
slideElem.addEventListener("change", event => {
if (slideElem.value < 0.5) {
getText(0);
} else {
getText(1);
}
});
当getText为函数时:
function getText(part) {
var texts = [
["Text 1 Part 1", "Text 2 Part 1", "Text 3 Part 1"],
["Text 1 Part 2", "Text 2 Part 2", "Text 3 Part 2"],
["Text 1 Part 3", "Text 2 Part 3", "Text 3 Part 3"]
];
var random = Math.floor(Math.random() * texts.length);
var currentText = random;
document.getElementById("text").innerHTML = texts[part][currentText];
}
(我还把texts变成了一个lists of lists用于泛化)。
完整片段:
function getText(part) {
var texts = [
["Text 1 Part 1", "Text 2 Part 1", "Text 3 Part 1"],
["Text 1 Part 2", "Text 2 Part 2", "Text 3 Part 2"],
["Text 1 Part 3", "Text 2 Part 3", "Text 3 Part 3"]
];
var random = Math.floor(Math.random() * texts.length);
var currentText = random;
document.getElementById("text").innerHTML = texts[part][currentText];
}
getText(0);
var slideElem = document.getElementById("wordSlider");
slideElem.addEventListener("change", event => {
if (slideElem.value < 0.5) {
getText(0);
} else {
getText(1);
}
});<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<span id="text"></span>
<br />
<input
type="range"
min="0"
max="1"
step="0.001"
value="0"
class="slider"
id="wordSlider"
/>
<script src="src/index.js"></script>
</body>
</html>请注意，如果您想坚持使用相同的文本，每个部分都会应用随机更改(因此随机只会执行一次，您应该在脚本加载时将其用作常量。像这样:
完整片段:
const texts = [
["Text 1 Part 1", "Text 2 Part 1", "Text 3 Part 1"],
["Text 1 Part 2", "Text 2 Part 2", "Text 3 Part 2"],
["Text 1 Part 3", "Text 2 Part 3", "Text 3 Part 3"]
];
const random = Math.floor(Math.random() * texts.length);
const currentText = random;
function getText(part) {
document.getElementById("text").innerHTML = texts[part][currentText];
}
getText(0);
var slideElem = document.getElementById("wordSlider");
slideElem.addEventListener("change", event => {
if (slideElem.value < 0.5) {
getText(0);
} else {
getText(1);
}
});<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<span id="text"></span>
<br />
<input
type="range"
min="0"
max="1"
step="0.001"
value="0"
class="slider"
id="wordSlider"
/>
<script src="src/index.js"></script>
</body>
</html>现在 slider 有两个部分..如果你想概括它取决于部分的大小，你应该得到 texts 的长度并将 slider 的阈值分成 texts.length 部分。像这样:
slideElem.addEventListener("change", event => {
let splitThreshold = 1/texts.length;
let wantedPart = Math.floor(slideElem.value/splitThreshold);
if(wantedPart>=texts.length)
wantedPart=texts.length-1;
getText(wantedPart);
});
完整片段:
const texts = [
["Text 1 Part 1", "Text 2 Part 1", "Text 3 Part 1"],
["Text 1 Part 2", "Text 2 Part 2", "Text 3 Part 2"],
["Text 1 Part 3", "Text 2 Part 3", "Text 3 Part 3"]
];
const random = Math.floor(Math.random() * texts.length);
const currentText = random;
function getText(part) {
document.getElementById("text").innerHTML = texts[part][currentText];
}
getText(0);
var slideElem = document.getElementById("wordSlider");
slideElem.addEventListener("change", event => {
let splitThreshold = 1/texts.length;
let wantedPart = Math.floor(slideElem.value/splitThreshold);
if(wantedPart>=texts.length)
wantedPart=texts.length-1;
getText(wantedPart);
});<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<span id="text"></span>
<br />
<input
type="range"
min="0"
max="1"
step="0.001"
value="0"
class="slider"
id="wordSlider"
/>
<script src="src/index.js"></script>
</body>
</html>关于javascript - 在某些 slider 值处更新文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63093848/