2016-01-25 22 views
0

類這些是我所做出的陣列中的JavaScript試圖給用戶一個選項來選擇劊子手

var f1teams = [ 
    ["F","E", "R", "R", "A", "R", "I"], 
    ["M", "C", "L","A","R","E","N"] 
    ["R","E","D","B","U","L","L"], 
    ["S","A","U","B","E","R"], 
    ["F","O","R","C","E","I","N","D","I","A"], 
    ["R","E","N","A","U","L","T"] 
] 

var PremierLeague = [ 
    ["L","I","V","E", "R", "P", "O", "O", "L"], 
    ["L", "E", "I","C","E","S","T","E","R"] 
    ["A","R","S","E","N","A","L"], 
    ["M","A","N","C","H","E","S","T","E","R","C","I","T","Y"], 
] 

這是我做出選擇的類別鏈接到setCategory功能HTML dropdown菜單的類別onChange事件。

<select id ="cards" onchange="setCategory()"> 
    <option value="1" selected="selected">Please select a Category</option> 
    <option value = "PL">Premier League Football Teams</option> 
    <option value = "F1">Formula 1 Teams</option> 
</select> 

這是給出f1teams的默認值的setCategory函數。我稱setUnderline()在函數結束時,設置相應的坯料

var selectCat = f1teams.slice(); 

function setCategory() { 
    var e = document.getElementById("cards"); 
    var strUser = e.options[e.selectedIndex].value; 

    if (strUser == "F1") { 
     window.alert("You have chosen Formula1 as your category"); 
     selectCat = f1teams.slice(); 
    } 
    else if (strUser == "PL") { 
     window.alert("You have chosen Premier League as your category"); 
     selectCat = PremierLeague.slice(); 
    } 
    else { 
     window.alert("Please choose a category"); 
     selectCat = f1teams.slice(); 
    } 
    setUnderline(); 
} 

這些是任何函數隨後setUnderline功能與起始之外定義一些變量。

var random = Math.floor((Math.random() * (selectCat.length))); 
var letter = selectCat[random]; 
var underline = new Array(letter.length); 

for (var i = 0; i < underline.length; i++){ 
    underline[i] = "_ "; 
} 

function setUnderline(){ 
    for (var i = 0; i < underline.length; i++){ 
     var guessfield = document.getElementById("guessfield"); 
     var letters = document.createTextNode(underline[i]); 
     guessfield.appendChild(letters); 
    } 
} 

function initiation(){ 
    if (selectCat !== null) { 
     setUnderline(); 
    } 
    window.onload = initiation; 

然而,當我點擊dropdown菜單上的改變,它只是形成了同一個詞的一些新的空白類別。

之前改變:

enter image description here

變化後:

enter image description here

我怎樣才能讓這個它會爲一個不同的字坯在不同的類別,而不是隻在改變類別上形成相同單詞的空白。如果我理解正確的問題,你在正確的軌道上

我完整的代碼在上載this repo但沒有setCategory()函數

Live Demo

+0

這是偉大的你加入回購的鏈接,但它會更好,如果你將添加一個片段或斌**有**的問題,所以我們可以看到問題並嘗試調試它。 –

+0

@MoshFeu這裏是一個鏈接到頁面live cdn.rawgit.com/zakomon/Hangman-fossasia/master/main.html忽略go按鈕和糟糕的設計 –

回答

0

它看起來好像您錯過了刪除guessfield元素內容的步驟。

這樣一個步驟可能是這個樣子:

function setUnderline() { 
    var guessfield = document.getElementById("guessfield"); 

    // Clear the existing contents of guessfield 
    guessfield.innerHTML = ''; 

    for (var i = 0; i < underline.length; i++){ 
    var letters = document.createTextNode(underline[i]); 
    guessfield.appendChild(letters); 
    } 
} 
相關問題