So speichern Sie JavaScript in einem JavaScript-Array

Question

Ich mache ein Spiel in JavaScript. Die Grundidee besteht darin, mehrere Buttons zu verwenden, die on.click verwenden, um Aktionen auszuführen (Monster bekämpfen, nach Schatz graben usw.).

Ein Knopf lädt das nächste Abenteuer. Ich habe ein Array, das alle Abenteuer mit den Werten "Beschreibung" (d), "Illustration" (i) und "Knöpfe" (b) enthält. Die Beschreibung und Abbildung HTML zeigt sich gut, aber das Javascript in der neuen "Get Flask" -Taste tut nichts. Flüchtige Charaktere scheinen nicht zu helfen. Gibt es einen besseren Weg, dies zu tun?

"Load nächstes Abenteuer" Button-Code: (erste paar Zeilen zufällig eine Zahl abholen bis 5, hat es Probleme, die ich am nächsten arbeiten würde)

<button type="button" 
    onclick="highLevel = y-1; 
      while (y >highLevel){ y = Math.round(Math.random() * 5)}; 
      document.getElementById('description').innerHTML = adventure[y].d; 
      document.getElementById('illustration').innerHTML = adventure[y].i; 
      document.getElementById('buttons').innerHTML = adventure[y].b" 
>Begin</button> 

Array Code:

adventure[y++]={ 
d:"Adventure 1", 
i:"<img src='cave_entrance.jpg' alt='cave entrance' /><figcaption></figcaption>", 
b:"<button type=&quot;button&quot; onclick=&quot;window.alert&#40;'Ye cannot get flask'&#41;&quot;>Get Flask</button>" 
} 

weitere Einzelheiten finden Sie den Code an: https://gist.github.com/janchor/5063f56da41d3e32c825ff154c6bd3be

Answer 1

ich Ihren Code nicht viel ändern, nur festgelegt, was Sie gesagt haben :)

function beginClick() { 
 
    var highLevel = y - 1; 
 
    y = Math.floor(Math.random() * highLevel); 
 
    document.getElementById('description').innerHTML = adventure[y].d; 
 
    document.getElementById('illustration').innerHTML = adventure[y].i; 
 
    document.getElementById('buttons').innerHTML = adventure[y].b 
 
} 
 

 

 
var adventure = []; 
 
var y = 0; 
 
adventure[y++] = { 
 
    d: "Adventure 1", 
 
    i: "<img src='cave_entrance.jpg' alt='cave entrance' /><figcaption></figcaption>", 
 
    b: "<button type='button'; onclick='adventure[y].actionGetFlask()'>Get Flask</button>", 
 
    actionGetFlask: function() { 
 
    alert('Ye cannot get flask'); 
 
    } 
 
}

<button type="button" onclick="beginClick()">Begin</button> 
 
<div id="description"></div> 
 
<div id="illustration"></div> 
 
<div id="buttons"></div>

Answer 2

Onclick eine Funktion aufrufen und Ihre Logik in die bewegen.

var adventure = { 
 
    d: "Adventure 1", 
 
    i: "<img src='cave_entrance.jpg' alt='cave entrance' /><figcaption></figcaption>", 
 
    b: "<button type=&quot;button&quot; onclick=&quot;window.alert&#40;'Ye cannot get flask'&#41;&quot;>Get Flask</button>" 
 
} 
 

 

 
function loadHtml() { 
 
    document.getElementById('description').innerHTML = adventure.d; 
 
    document.getElementById('illustration').innerHTML = adventure.i; 
 
    document.getElementById('buttons').innerHTML = adventure.b 
 
}

<button type="button" onclick="loadHtml()">Begin</button> 
 

 
<div id="description"></div> 
 
<div id="illustration"></div> 
 
<div id="buttons"></div>