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（） 'の結果を代入した後の数値が入ります。それでは、後で 'innerHTML'、' style'などのプロパティを設定することで、後でDOM要素のように扱いますか？それはあなたが期待している通りには動作しません。 – RJM

これは私が混乱しているところだと思います。ありがとう！私は戻って、それを修正するつもりです！ – aisem19

'MouseDown'イベントは、呼び出されたときに' showEnglish'関数のパラメータとして渡されます。イベントとその 'id'を起動した要素を取得するには、' event.srcElement'（またはFirefoxでは 'event.target'）を使用する必要があります。しかし、これを単純化して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>

その他のソリューション翻訳

// 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>

0から

ビルドDOM

出典

2017-04-19 22:02:21

2番目のソリューション –

Javascript機能に問題はありますか？

答えて

関連する問題