javascriptで文字列の置換をユーザーインターフェイスに反映させる方法

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6    <meta name="viewport" content="width=device-width">
7    <title>Silly story generator</title>
8
9    <style>
10
11    body {
12      font-family: helvetica, sans-serif;
13      width: 350px;
14    }
15
16    label {
17      font-weight: bold;  
18    }
19
20    div {
21      padding-bottom: 20px;
22    }
23
24    input[type="text"] {
25      padding: 5px;
26      width: 150px;
27    }
28
29    p {
30      background: #FFC125;
31      color: #5E2612;
32      padding: 10px;
33      visibility: hidden;
34    }
35
36    </style>
37  </head>
38
39  <body>
40    <div>
41      <label for="customname">Enter custom name:</label>
42      <input id="customname" type="text" placeholder="">
43    </div>
44    <div>
45      <label for="us">US</label><input id="us" type="radio" name="ukus" value="us" checked>
46      <label for="uk">UK</label><input id="uk" type="radio" name="ukus" value="uk">
47    </div>
48    <div>
49      <button class="randomize">Generate random story</button>
50    </div>
51    <!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
52    <p class="story"></p>
53    
54
55    <script src="main.js"></script>
56  </body>
57</html>

javascript
1const customName = document.getElementById('customname');
2const randomize = document.querySelector('.randomize');
3const story = document.querySelector('.story');
4
5function randomValueFromArray(array) {
6  const random = Math.floor(Math.random() * array.length);
7  return array[random];
8}
9
10randomize.addEventListener('click', result);
11
12function result() {
13  let storyText = "It was 94 fahrenheit outside, so :xItem:went for a walk. When they got to :yItem:, they stared in horror for a few moments, then :zItem:. Bob saw the whole thing, but was not surprised — :'insertx': weighs 300 pounds, and it was a hot day."
14  let insertX = ['Willy the', 'Goblin Big Daddy', 'Father ', 'Christmas'];
15  let insertY = ['the soup kitchen', 'Disneyland ', 'the White House'];
16  let insertZ = ['spontaneously combusted ', 'melted into a puddle on the sidewalk', 'turned into a slug and crawled away'];
17
18  let newStory = storyText;
19  let xItem = randomValueFromArray(insertX);
20  let yItem = randomValueFromArray(insertY);
21  let zItem = randomValueFromArray(insertZ);
22
23  newStory.replace(':xItem:', xItem);
24  newStory.replace(':yItem:', yItem);
25  newStory.replace(':zItem:', zItem);
26
27
28  if (customName.value !== '') {
29    let name = customName.value;
30    newStory.replace('bob', name.value)
31  }
32
33  if (document.getElementById("uk").checked) {
34    let weight = Math.round(300 * 0.071428639017158);
35    let temperature = Math.round((94) - 32 / 1.8);
36
37    let join = weight + ' stone';
38    let joint = temperature + ' centigrade';
39
40    newStory.replace('94 fahrenheit', joint);
41    newStory.replace('300 pounds', join);
42  }
43console.log(newStory)
44  story.textContent = newStory;
45  story.style.visibility = 'visible';
46}

現在こちらの(https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator)
mozillaの課題をやっており、つまずいてしまったため質問いたします。

＃聞きたい事
一応console.log中では文字列の置換に成功しました。それをUIにも反映させたいのですが反映させることができませんでした。そこでUIに反映させる方法が知りたいです。

（https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/）
こちらが完成版となっております。

Lhankor_Mhy

2020/02/04 06:26

「UIにも反映させたい」とのことですが、UIとはなんですか？

21212121

2020/02/04 06:28

ユーザーインターフェイスです！

Lhankor_Mhy

2020/02/04 06:35

ですよね。それで、具体的にはどれのことですか？

21212121

2020/02/04 06:38

It was 94 fahrenheit outside, so :xItem:went for a walk. When they got to :yItem:, they stared in horror for a few moments, then :zItem:. Bob saw the whole thing, but was not surprised — :'insertx': weighs 300 pounds, and it was a hot day. 部分の:xItem:などがコンソール上ではうまく置換されているのですが、UI上には反映されていないので、うまく反映させる方法が知りたいです。部分の

Lhankor_Mhy

2020/02/04 06:54

「コンソール上ではうまく置換されている」とのことですが、当方の環境では置換されませんでした。ご提示いただいているコードは、2626kaiさんがお手元で動かしているコードと全く同じものですか？