Stuck mit einer JavaScript-Funktion?

Ich muss eine Funktion aufrufen, um französische Sätze ins Englische zu übersetzen, und ich stecke auf der showEnglish() fest. Es wird nicht die english Arrays ziehen. Und ich bin mir nicht einmal sicher, ob ich die Setup-Funktion richtig referenziere, die ich in einer separaten JavaScript-Datei hatte.Stuck mit einer JavaScript-Funktion?

Hier ist, was ich bisher:

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)"; 
}

Quelle

2017-04-19 aisem19

'phraseNumber' enthält einen numerischen Wert, nachdem Sie das Ergebnis von' parseInt() 'zugewiesen haben. Warum behandeln Sie es später wie ein DOM-Element, indem Sie Eigenschaften wie "innerHTML", "style" usw. setzen? Das wird nicht so funktionieren, wie du es erwartest. – RJM

Ich denke, das ist, wo ich verwirrt bin. Vielen Dank! Ich werde zurückgehen und es korrigieren! – aisem19

'MouseDown'-Ereignis wird als Parameter der' showEnglish' -Funktion übergeben, wenn es aufgerufen wird. Sie müssen 'event.srcElement' (oder' event.target' in Firefox) verwenden, um das Element abzurufen, das das Ereignis und seine ID ausgelöst hat. Aber kann dies vereinfachen und die Verwendung von IDs vermeiden. Siehe meine Antwort unten. –

Hier ist ein Beispiel-Schnipsel, die Ihren Bedürfnissen entspricht nicht ids verwenden und sollte.

Die Fragenliste kann mit einem Skript einfach aus dem translations-Objekt erstellt werden. (Check-Schnipsel in zweite Lösung unten)

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

Andere Lösung

Build-DOM von Übersetzungen

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

Quelle

2017-04-19 22:02:21

Eine zweite Lösung hinzugefügt –

Stuck mit einer JavaScript-Funktion?

Antwort

Verwandte Themen