卡住了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函数？

回答

相关问题