我尝试用变量 itemX、itemY、itemZ 替换 storyText 字符串中的 ':insertx:'、':inserty:'、':insertz:'，但是当我运行程序时，它不会替换。
有没有办法用连接(添加 itemXYZ 变量)而不是使用 .replace() 方法来重写故事文本字符串？
//1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS
var customName = document.getElementById('customname');
var randomize = document.querySelector('.randomize');
var story = document.querySelector('.story');
function randomValueFromArray(array){
return array[Math.floor(Math.random()*array.length)];
}
//2. TEXT STRINGS
let storyText = 'It was 94 fahrenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but was not surprised — :insertx: weighs 300 pounds, and it was a hot day.';
let insertX = ['Willy the Goblin', 'Big Daddy', 'Father Christmas'];
let insertY = ['the soup kitchen','Disneyland', 'the White House'];
let insertZ = ['spontaneously combusted','melted into a puddle on the sidewalk','turned into a slug and crawled away'];
//3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION
randomize.addEventListener('click', result);
function result() {
let newStory = storyText;
let itemX = randomValueFromArray(insertX);
let itemY = randomValueFromArray(insertY);
let itemZ = randomValueFromArray(insertZ);
//replaces inserts in stortText w/ randomized strings from itemX,Y,Z
newStory = newStory.replace(':insertx:', itemX);
newStory = newStory.replace(':inserty:', itemY);
newStory = newStory.replace(':insertz:', itemZ);
newStory = newStory.replace(':insertx:', itemX);
//replaces 'Bob' w/ custom name if given
if(customName.value !== '') {
let name = customName.value;
newStory = newStory.replace('Bob', name);
}
//converts fahrenheit to centigrade & pounds to stone
if(document.getElementById("uk").checked) {
let temperature = Math.round((94 - 32) * 5/9) + ' centigrade';
let weight = Math.round(300 * 0.071429) + ' stone';
newStory = newStory.replace('94 fahrenheit', temperature);
newStory = newStory.replace('300 pounds', weight);
}
story.textContent = newStory;
story.style.visibility = 'visible';
}body {
font-family: helvetica, sans-serif;
width: 350px;
}
label {
font-weight: bold;
}
div {
padding-bottom: 20px;
}
input[type="text"] {
padding: 5px;
width: 150px;
}
p {
background: #FFC125;
color: #5E2612;
padding: 10px;
visibility: hidden;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="generatorStyles.css">
<title>Silly story generator</title>
</head>
<body>
<div>
<label for="customname">Enter custom name:</label>
<input id="customname" type="text" placeholder="">
</div>
<div>
<label for="us">US</label><input id="us" type="radio" name="ukus" value="us" checked>
<label for="uk">UK</label><input id="uk" type="radio" name="ukus" value="uk">
</div>
<div>
<button class="randomize">Generate random story</button>
</div>
<!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
<p class="story"></p>
<script src="main.js"></script>
</body>
</html>最佳答案
这是一个使用模板文字的例子。您可以找到文档 here
//1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS
var customName = document.getElementById('customname');
var randomize = document.querySelector('.randomize');
var story = document.querySelector('.story');
function randomValueFromArray(array){
return array[Math.floor(Math.random()*array.length)];
}
//2. TEXT STRINGS
let insertX = ['Willy the Goblin', 'Big Daddy', 'Father Christmas'];
let insertY = ['the soup kitchen','Disneyland', 'the White House'];
let insertZ = ['spontaneously combusted','melted into a puddle on the sidewalk','turned into a slug and crawled away'];
//3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION
randomize.addEventListener('click', result);
function result() {
let itemX = randomValueFromArray(insertX);
let itemY = randomValueFromArray(insertY);
let itemZ = randomValueFromArray(insertZ);
//replaces inserts in stortText w/ randomized strings from itemX,Y,Z
let newStory = `It was 94 fahrenheit outside, so ${itemX} went for a walk. When they got to ${itemY}, they stared in horror for a few moments, then ${itemZ}. Bob saw the whole thing, but was not surprised — ${itemX} weighs 300 pounds, and it was a hot day.`;
//replaces 'Bob' w/ custom name if given
if(customName.value !== '') {
let name = customName.value;
newStory = newStory.replace('Bob', name);
}
//converts fahrenheit to centigrade & pounds to stone
if(document.getElementById("uk").checked) {
let temperature = Math.round((94 - 32) * 5/9) + ' centigrade';
let weight = Math.round(300 * 0.071429) + ' stone';
newStory = newStory.replace('94 fahrenheit', temperature);
newStory = newStory.replace('300 pounds', weight);
}
story.textContent = newStory;
story.style.visibility = 'visible';
}body {
font-family: helvetica, sans-serif;
width: 350px;
}
label {
font-weight: bold;
}
div {
padding-bottom: 20px;
}
input[type="text"] {
padding: 5px;
width: 150px;
}
p {
background: #FFC125;
color: #5E2612;
padding: 10px;
visibility: hidden;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="generatorStyles.css">
<title>Silly story generator</title>
</head>
<body>
<div>
<label for="customname">Enter custom name:</label>
<input id="customname" type="text" placeholder="">
</div>
<div>
<label for="us">US</label><input id="us" type="radio" name="ukus" value="us" checked>
<label for="uk">UK</label><input id="uk" type="radio" name="ukus" value="uk">
</div>
<div>
<button class="randomize">Generate random story</button>
</div>
<!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
<p class="story"></p>
<script src="main.js"></script>
</body>
</html>关于javascript - 如何使用字符串连接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53891145/