字符串引用的對象未顯示

Question

我的意圖：使用對象進行CYOA

我是Java語言的新手，並且一直在嘗試使用Reddit注釋中的這段代碼作為模板來制作簡單的CYOA游戲。 但是，我想使用對象（其值旨在保持不變）來存儲消息和每個選擇指向的對象的各種字符串值，而不是將所有對象都放置在數組中，而必須使用using來指向它們它們在數組中的索引。 我的理由是，（從理論上來說）使用“ msg_001”或“ story5_28”之類的字符串進行組織（從理論上來說）比較簡單，而不必在我在中間插入一些新消息集的情況下更改一堆數字數組。

我的問題：第一個消息不再顯示

基本上，我想循環回到第一個消息及其答案集，但不會。

初始printCurrentMsg()可以工作（將“ message” div的內容更改為msgText的值，並根據msgText的對象遍歷對象的choices數組以設置“ choices” div中的currentMsg ）。按鈕的各自的onlick屬性似乎起作用，直到將它們設置為顯示msg_000 。

看起來無論currentMsg的值是currentMsg ， printCurrentMsg都不會顯示該字符串所引用的對象，除非它最初是在顯示時。 另外，在腳本的各個位置使用console.log之后，我注意到currentMsg並未更改，並且對currentMsg和window[currentMsg]使用console.log(typeof)都表明前者是字符串，而后者是字符串。一個東西。 我是否無意中創建了兩個單獨的變量？

我試過了...

• ...使用printCurrentMessage參數。
• ...在函數中使用currentMsg而不是window[currentMsg] 。
• ...使用圓點符號代替括號符號。
• ...使用this[]而不是window[] 。

我不確定這是否與異步有關 ，我訪問的對象屬性不正確，我對范圍的理解有缺陷，還是我錯誤地使用了全局變量。 我應該使用某種回調嗎？

使用“虛擬” msg_000使另一個對象具有不同的名稱但具有相同的屬性）可以作為權宜之計，但是我仍然不明白問題出在哪里。 將所有msg_***對象放在一個數組中並通過索引號而不是字符串來引用它們也是可行的，但是出於上述乏味和我仍然不明白為什么的原因，我猶豫要依靠它currentMsg的值保持不變。

為了更好地闡明我的問題， 這是我的代碼的jsfiddle ，我也將其發布在下面。

 //messages var msg_000 = { //Starts with this one, I want to be able to go back to it msgName: "msg_000", msgText: "Sup! Choose an option!", choices: [ ans_000 = { ansText: "Climb a hill!", ansGoto: "msg_001" //this works }, ans_001 = { ansText: "Skin a cat!", ansGoto: "msg_002" //this works }, ans_002 = { ansText: "Build a birdhouse!", ansGoto: "msg_003" //this works } ] }; var msg_001 = { msgName: "msg_001", msgText: "You summit the great snowy peaks!", choices: [ ans_000 = { ansText: "Talk to the Recursion Guru!", ansGoto: "msg_000" //this doesn't work } ] }; var msg_002 = { msgName: "msg_002", msgText: "You suffer severe lacerations to the face!", choices: [ ans_000 = { ansText: "Start Over", ansGoto: "msg_000" //this doesn't work } ] }; var msg_003 = { msgText: "You build a pretty average looking birdhouse. Some grackles have moved in nonetheless, placing their various knicknacks, bedding materials, and chrono-gateways within their new abode.", choices: [ ans_000 = { ansText: "Step through the chrono-gateway!", ansGoto: "msg_000" //this doesn't work }, ans_001 = { ansText: "I think I wanna climb that mountain over there.", ansGoto: "msg_001" //this works } ] } var currentMsg = "msg_000"; //the first message is "msg_000" printCurrentMsg = function() { document.getElementById("message").innerHTML = window[currentMsg].msgText; //sets the message (the div with the id of "message") //based on the "currentMsg" variable. "currentMsg.msgText" //doesn't seem to work. var choices = ""; for (var i = 0, l = window[currentMsg].choices.length; i < l; i++) { choices += "<p><button onclick='setMessage(" + window[currentMsg].choices[i].ansGoto + ")'>" + window[currentMsg].choices[i].ansText + "<br>Goto " + window[currentMsg].choices[i].ansGoto + "</button></p>"; //make the buttons, sets the button's onclick //"setMessage" function's parameter to the the value of //the "ansGoto" property -> in the answers object at the //i/th index of the choices property array -> in the //"msg_(number)" object." }; document.getElementById("choices").innerHTML = choices; //takes the value of the "choices" [local?] variable and puts //it in the "choices" div. }; setMessage = function(msg) { window[currentMsg] = msg; //I think this is the source of all //my problems, it's supposed to set "currentMsg" to the value //of the "msg" parameter, but when I check it with //console.log(currentMsg) it hasn't been changed (ie, still //it's initial value of "msg_000") and when I use //console.log(window[currentMsg]) it returns "[Object //object]"; using typeof shows me that "currentMsg" is a //string and "window[currentMsg]" is an object. I thought //they both were the same object, am I unintentionally //creating two different objects? printCurrentMsg(); //runs that function, seems to display the //messages except the ones from object "msg_000". }; printCurrentMsg(); //Displays the initial message and choices //from "msg_000", but after a new message is chosen it won't //display "msg_000" if it's pointed to from an "ansGoto" //property. 

 <!DOCTYPE html> <html> <body> <div id="message"></div> <!-- "msgText" goes here --> <div id="choices"></div> <!-- "choices" go here --> </body> </html> 

感謝您的時間。

Answer 1

當setMessage()執行window[currentMsg] = msg; ，它將替換保存消息的變量的值。 例如，如果當前消息為msg_000 ，而您執行setMessage(msg_002) ，則等效於寫入msg_000 = msg_002; 。

您真正想要做的是將currentMsg的值更改為currentMsg的名稱。 因此，您應該這樣做： currentMsg = msg.msgName; 。

你也失蹤了msgName財產msg_003 。

作為最佳實踐，您不應該為所有這些使用全局變量。 創建您自己的對象messages ，然后使用messages[currentMsg] 。

 //messages var msg_000 = { //Starts with this one, I want to be able to go back to it msgName: "msg_000", msgText: "Sup! Choose an option!", choices: [ ans_000 = { ansText: "Climb a hill!", ansGoto: "msg_001" //this works }, ans_001 = { ansText: "Skin a cat!", ansGoto: "msg_002" //this works }, ans_002 = { ansText: "Build a birdhouse!", ansGoto: "msg_003" //this works } ] }; var msg_001 = { msgName: "msg_001", msgText: "You summit the great snowy peaks!", choices: [ ans_000 = { ansText: "Talk to the Recursion Guru!", ansGoto: "msg_000" //this doesn't work } ] }; var msg_002 = { msgName: "msg_002", msgText: "You suffer severe lacerations to the face!", choices: [ ans_000 = { ansText: "Start Over", ansGoto: "msg_000" //this doesn't work } ] }; var msg_003 = { msgName: "msg_003", msgText: "You build a pretty average looking birdhouse. Some grackles have moved in nonetheless, placing their various knicknacks, bedding materials, and chrono-gateways within their new abode.", choices: [ ans_000 = { ansText: "Step through the chrono-gateway!", ansGoto: "msg_000" //this doesn't work }, ans_001 = { ansText: "I think I wanna climb that mountain over there.", ansGoto: "msg_001" //this works } ] } var currentMsg = "msg_000"; //the first message is "msg_000" printCurrentMsg = function() { document.getElementById("message").innerHTML = window[currentMsg].msgText; //sets the message (the div with the id of "message") //based on the "currentMsg" variable. "currentMsg.msgText" //doesn't seem to work. var choices = ""; for (var i = 0, l = window[currentMsg].choices.length; i < l; i++) { choices += "<p><button onclick='setMessage(" + window[currentMsg].choices[i].ansGoto + ")'>" + window[currentMsg].choices[i].ansText + "<br>Goto " + window[currentMsg].choices[i].ansGoto + "</button></p>"; //make the buttons, sets the button's onclick //"setMessage" function's parameter to the the value of //the "ansGoto" property -> in the answers object at the //i/th index of the choices property array -> in the //"msg_(number)" object." }; document.getElementById("choices").innerHTML = choices; //takes the value of the "choices" [local?] variable and puts //it in the "choices" div. }; setMessage = function(msg) { currentMsg = msg.msgName; printCurrentMsg(); //runs that function, seems to display the //messages except the ones from object "msg_000". }; printCurrentMsg(); //Displays the initial message and choices //from "msg_000", but after a new message is chosen it won't //display "msg_000" if it's pointed to from an "ansGoto" //property. 

 <!DOCTYPE html> <html> <body> <div id="message"></div> <!-- "msgText" goes here --> <div id="choices"></div> <!-- "choices" go here --> </body> </html>