配列の中に用意した動画URLを置き換えようとしても、表示されません。

現在大きく二つの機能を持ったWEBアプリを作ってみています。
一つは、プルダウンメニューでユーザーが選択した「感情」と「その大きさ」に応じて動画を表示する機能です。
表示する動画はあらかじめ私が配列にyoutubeの埋め込みURLを格納しており、ユーザーの選択によって表示する動画を変えています。
もう一つの機能は、ユーザーが動画を設定する機能です。
ユーザがURLをテキストボックスに入力し、ユーザーが選択した「感情」と「その大きさ」に応じて適切な配列に既に入っているものと置き換える形で格納しようとしています。

しかし、置き換えをおこなってみて、一つ目の機能の方で該当する動画を表示させようとしても、なぜか表示されずに困っています。
この原因と解決方法が分かる方がいれば教えてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="style.css">
8    <title>オススメ動画</title>
9</head>
10<body>
11    
12    <header>
13        <div class="headerInner">
14            <h1 class="logo">感情喚起動画提案サイト</h1>
15        </div>
16    </header>
17
18<main>
19    <div class="mainInner">
20        <h1>今のあなたにぴったりの動画をオススメするよ!</h1>
21
22            <p class="box2">どんな気分になりたい?</p>
23            <select name="emotion" id="emotion">
24                <option value="happy">嬉しい気持ち</option>
25                <option value="sad">悲しい気持ち</option>
26                <option value="angry">ムカつく気持ち</option>
27                <option value="fun">楽しい気持ち</option>
28                <option value="strange">不思議な気持ち</option>
29                </select>
30
31            <p class="box3">どれくらいその気持ちになりたい？</p>
32            <input type="number" name="degree" id="degree" min="1" max="5" value="1"><br>
33
34            <button id="btn" type="submit">決まったら押してね!</button>
35            <p id="textResult"></p>
36            <p id="movieResult"></p>
37
38        <h1 class="addh">君が新しく動画を追加してみよう!</h1>
39
40        <p class="box3">登録する動画のURLを入力してね</p>
41                <input type="text"id="textbox" name="nickname"><br>
42
43                <p class="box2">その動画を見るとどんな気分になる？</p>
44                <select name="emotionAdd" id="emotionAdd">
45                <option value="happy">嬉しい気持ち</option>
46                <option value="sad">悲しい気持ち</option>
47                <option value="angry">ムカつく気持ち</option>
48                <option value="fun">楽しい気持ち</option>
49                <option value="strange">不思議な気持ち</option>
50                </select>
51            
52            <p class="box3">どれくらい感情にインパクトがある？</p>
53            <input type="number" name="degreeAdd" id="degreeAdd" min="1" max="5" value="1"><br>
54            
55            
56            <p id="textResult2"></p>
57            <button id="btn2" type="submit">登録するよ!!</button>
58
59            
60
61            
62
63    </div>
64</main>
65
66    
67    
68        
69    <script src="index.js"></script>
70</body>
71</html>

JavaScript
1`use strict`;
2
3//htmlから操作したい要素を取得
4const btn = document.getElementById("btn");
5const mojiResult = document.getElementById("textResult");
6const dougaResult = document.getElementById("movieResult")
7
8const btn2 = document.getElementById("btn2");
9const mojiResult2 = document.getElementById("textResult2");
10const movieUrl = document.getElementById("textbox");
11
12btn2.addEventListener("click", function(){
13
14//文章が既に表示されている場合削除する
15mojiResult2.innerText = "";
16
17const emotion2 = document.getElementById("emotionAdd");
18const degree2 = document.getElementById("degreeAdd");
19
20const resultText2 = document.createElement("h2");
21resultText2.innerText = "君が教えてくれた動画を登録したよ!";
22mojiResult2.appendChild(resultText2);
23
24//各感情の配列に対して、テキストボックスに入れられたURLで置き換える
25if(emotion2.value === "happy"){
26    //YoutubeのURLの「watch?v=」の部分をembed/に置き換えないと埋め込まれないので、置き換える。
27    movieUrl.value.replace("watch?v=", "embed/");
28    happyArray.splice(degree2.value-1, 1, movieUrl);
29} else if(emotion2.value === "sad"){
30    movieUrl.value.replace("watch?v=", "embed/");
31    sadArray.splice(degree2.value-1, 1, movieUrl);
32}else if(emotion2.value === "angry"){
33    movieUrl.value.replace("watch?v=", "embed/");
34    angryArray.splice(degree2.value-1, 1, movieUrl);
35  }else if (emotion2.value === "fun"){
36    movieUrl.value.replace("watch?v=", "embed/");
37    funArray.splice(degree2.value-1, 1, movieUrl);
38  } else{
39    movieUrl.value.replace("watch?v=", "embed/");
40    strangeArray.splice(degree2.value-1, 1, movieUrl);
41  }
42})
43
44//ボタンを押されたときに実行する関数
45btn.addEventListener("click", function(){
46
47//新しく動画を出力しているときに、前回表示したテキストと動画を消去する。
48mojiResult.innerText = "";
49dougaResult.innerText = "";
50
51//HTMLからプルダウンで選ばれた要素を変数に代入
52const emotion = document.getElementById("emotion");
53const degree = document.getElementById("degree");
54
55//「そんなあなたにはこの動画がオススメだよ」という文言を表示
56const resultText = document.createElement("h2");
57resultText.innerText = "そんなあなたにはこの動画がオススメだよ";
58mojiResult.appendChild(resultText);
59
60if(emotion.value === "happy"){
61    const pushMovie = document.createElement("iframe")
62    pushMovie.src = happyArray[degree.value-1];
63    pushMovie.title = "YouTube video player";
64    pushMovie.width = 560;
65    pushMovie.height = 315;
66    pushMovie.frameborder = 0;
67    pushMovie.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
68    dougaResult.appendChild(pushMovie);
69} else if(emotion.value === "sad"){
70    const pushMovie = document.createElement("iframe")
71    pushMovie.src = sadArray[degree.value-1];
72    pushMovie.title = "YouTube video player";
73    pushMovie.width = 560;
74    pushMovie.height = 315;
75    pushMovie.frameborder = 0;
76    pushMovie.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
77    dougaResult.appendChild(pushMovie);
78} else if(emotion.value === "angry"){
79    const pushMovie = document.createElement("iframe")
80    pushMovie.src = angryArray[degree.value-1];
81    pushMovie.title = "YouTube video player";
82    pushMovie.width = 560;
83    pushMovie.height = 315;
84    pushMovie.frameborder = 0;
85    pushMovie.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
86    dougaResult.appendChild(pushMovie);
87} else if(emotion.value === "fun"){
88    const pushMovie = document.createElement("iframe")
89    pushMovie.src = funArray[degree.value-1];
90    pushMovie.title = "YouTube video player";
91    pushMovie.width = 560;
92    pushMovie.height = 315;
93    pushMovie.frameborder = 0;
94    pushMovie.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
95    dougaResult.appendChild(pushMovie);
96} else {
97    const pushMovie = document.createElement("iframe")
98    pushMovie.src = strangeArray[degree.value-1];
99    pushMovie.title = "YouTube video player";
100    pushMovie.width = 560;
101    pushMovie.height = 315;
102    pushMovie.frameborder = 0;
103    pushMovie.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
104    dougaResult.appendChild(pushMovie);
105}
106
107})
108
109const happyArray = ["https://www.youtube.com/embed/poiZSEjQBgw"];
110const sadArray = ["https://www.youtube.com/embed/od0HCGwEuOk"];
111const angryArray = ["https://www.youtube.com/embed/j8ShocFxWp0"];
112const funArray = ["https://www.youtube.com/embed/IcF3-tZgcRo"];
113const strangeArray = ["https://www.youtube.com/embed/PgKgEVUVLok"]
114

css
1body{
2    margin: 0;
3    font-family: sans-serif;
4}
5
6.addh{
7    border-top: 3px solid #726d6d; 
8}
9
10
11header{
12    background-color: rgb(181, 196, 196);
13    height: 50px;
14}
15
16.logo{
17    font-size: 30px;
18    margin: 0;
19    color: rgb(51, 50, 50);
20}
21
22.headerInner{
23    display: flex;
24    justify-content: space-between;
25    align-items: center;
26}
27
28.headerInner, .mainInner{
29    max-width: 1000px;
30    margin: auto;
31    padding: 0 20px;
32}
33
34.mainInner{
35    text-align: center;
36}
37
38#btn, #btn2{
39  margin-top: 20px;
40  font-size: 18px;
41  display: inline-block;
42  color: #fff;
43  background-color: #eb6100;
44  text-decoration: none;
45  width: 200px;
46  height: 50px;
47  line-height: 50px;
48  border-radius: 10px;
49  box-shadow: 3px 3px 3px #000;
50  text-shadow: 3px 3px 3px rgba(255,0,0,.3);
51}
52
53.box2 {
54    padding: 0.5em 1em;
55    margin: 2em 0;
56    font-weight: bold;
57    color: #6091d3;/*文字色*/
58    background: #FFF;
59    border: solid 3px #6091d3;/*線*/
60    border-radius: 10px;/*角の丸み*/
61}
62
63.box3 {
64    padding: 0.5em 1em;
65    margin: 2em 0;
66    font-weight: bold;
67    color: #d36073;/*文字色*/
68    background: #FFF;
69    border: solid 3px #d36073;/*線*/
70    border-radius: 10px;/*角の丸み*/
71}

行動規範の内容に同意します

回答1件

ベストアンサー

replace() メソッドは、pattern に一致する文字列の一部またはすべてを replacement で置き換えた新しい文字列を返します。 pattern には文字列または正規表現 (RegExp) を指定することができ、 replacement には文字列または一致するごとに呼び出される関数を指定することができます。 pattern が文字列の場合、最初に一致した箇所のみを置き換えます。

元の文字列は変更されません。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

js
1    //YoutubeのURLの「watch?v=」の部分をembed/に置き換えないと埋め込まれないので、置き換える。
2    movieUrl.value.replace("watch?v=", "embed/");
3    happyArray.splice(degree2.value-1, 1, movieUrl);

につきまして、
元の文字列は変更されないことと、
inputタグそのものであるmovieUrlを、文字列の配列であるhappyArrayに設定していること
が原因だと思いました。

次のように変更すると、現在問題となっている点は解消されると思います。

js
1    //YoutubeのURLの「watch?v=」の部分をembed/に置き換えないと埋め込まれないので、置き換える。
2    const url = movieUrl.value.replace("watch?v=", "embed/");
3    happyArray.splice(degree2.value-1, 1, url);