卡住了javascript函數？

我必須調用一個函數來將法語短語翻譯成英語，並且我卡在showEnglish()上。它不會拉動english陣列。而且我甚至不確定我是否在單獨的JavaScript文件中引用了設置功能。卡住了javascript函數？

這是我到目前爲止有：

window.onload = setup; 
function setup() { 
    var questions = document.querySelectorAll("article ol li"); 
    for (var i = 0; i < questions.length; i++){ 
     questions[i].id = i + "phrase"; 
     questions[i].onmousedown = showEnglish; 
     //questions[i].onmouseup = showFrench; 
     questions[i].style.cursor = "pointer"; 
    }  
} 
function showEnglish() { 
    var phrases = document.getElementById("phrase"); 
    var phraseNumber = parseInt(phrases.id); 
    phraseNumber.innerHTML = english[phraseNumber]; 
    phraseNumber.style.fontStyle = "italic"; 
    phraseNumber.style.fontColor = "rgb(191, 22, 31)"; 
}

來源

2017-04-19 aisem19

''phraseNumber'在分配parseInt（）'的結果後包含一個數值。那麼，爲什麼你後來把它當作一個DOM元素來處理，通過設置它的屬性，比如'innerHTML'，'style'等等呢？這不會像你期望的那樣工作。 – RJM

我認爲這是我感到困惑的地方。謝謝！我會收回並糾正它！ – aisem19

當被調用時，'MouseDown'事件作爲'showEnglish'函數的參數傳遞。您必須使用'event.srcElement'（或Firefox上的'event.target'）來檢索觸發事件及其''id'的元素。但可以簡化這一點，避免使用ID。請參閱下面的答案。 –

這裏是不使用的ID，並應符合您需要的示例代碼段。

問題列表可以使用腳本輕鬆地從翻譯對象構建。（檢查片斷在第二溶液下面）

// On document load (warning: does not work with IE8) 
 
document.addEventListener('DOMContentLoaded', function() { 
 
    setup() 
 
}) 
 

 
// Store French -> English translations 
 
var translations = { 
 
    "Comment vous appelez vous ?": "What's your name ?", 
 
    "Où habitez vous ?": "Where do you live ?" 
 
}; 
 

 
// Attach `translate` function to questions `mousedown` event 
 
function setup() { 
 

 
    document 
 
    .querySelectorAll("article ol li") 
 
    .forEach(function(el) { 
 
     el.onmousedown = showEnglish 
 
    }); 
 
} 
 

 
// Display translation when mousedown on element 
 
function showEnglish(event) { 
 
    var element = event.srcElement || event.target 
 
    var translation = document.getElementById("translation"); 
 
    translation.innerHTML = translations[element.innerText]; 
 
}

<html> 
 
<head> 
 
    <style> 
 
    .question { cursor: pointer; padding: 4px } 
 
    .translation { font-style: italic; color: rgb(191, 22, 31) } 
 
    </style> 
 
</head> 
 
<body> 
 
    <h3>Questions</h3> 
 
    <article> 
 
    <ol> 
 
     <li class="question">Comment vous appelez vous ?</li> 
 
     <li class="question">Où habitez vous ?</li> 
 
    </ol> 
 
    </article> 
 
    <h3>Traduction</h3> 
 
    <div class="translation" id="translation"></div> 
 
</body> 
 
</html>

其他溶液

生成DOM從翻譯

// On document load (warning: does not work with IE8) 
 
document.addEventListener('DOMContentLoaded', function() { 
 
    buildDOM(); 
 
}) 
 

 
// Store French -> English translations 
 
var translations = { 
 
    "Comment vous appelez vous ?": "What's your name ?", 
 
    "Où habitez vous ?": "Where do you live ?" 
 
}; 
 

 
// Display translation when mousedown on element 
 
function showEnglish(event) { 
 
    var element = event.srcElement || event.target 
 
    var translation = document.getElementById("translation"); 
 
    translation.innerHTML = translations[element.innerText]; 
 
} 
 

 
function buildDOM() { 
 
    var ol = document.createElement("ol"); 
 

 
    for (var t in translations) { 
 
     var el = document.createElement("li"); 
 
     el.className = "question"; 
 
     el.innerText = t; 
 
     el.onmousedown = showEnglish 
 
     ol.appendChild(el); 
 
    } 
 

 
    document.getElementById("questions").appendChild(ol); 
 
}

<html> 
 
<head> 
 
    <style> 
 
     .question { cursor: pointer; padding: 4px } 
 
     .translation { font-style: italic; color: rgb(191, 22, 31) } 
 
    </style> 
 
</head> 
 
<body> 
 
    <h3>Questions</h3> 
 
    <div id="questions"></div> 
 
    <h3>Traduction</h3> 
 
    <div id="translation" class="translation"></div> 
 
</body> 
 
</html>

來源

2017-04-19 22:02:21

增加了第二個解決方案 –

卡住了javascript函數？

回答

相關問題