CODEWITHSUNDEEP
javascriptinnerhtmltranslate
Amir Khadem
Amir Khadem

Reputation: 681

Javascript Toggle Translations of Title onClick

I have a title within a div tag. I need to translate the title whenever a translate button is clicked. I have so far gotten to the point where i find the title div and want to change the contents of it by using a languageMap. But its not functioning! Any ideas?

var languageMap = {
    'English1': 'French1',
    'English2': 'French2'
}

  function translateTitle() {
    var qmTitle = document.getElementById('toolTitle')
    var qmTitleText = qmTitle.innerHTML    
    var translatedTitle = languageMap[qmTitleText]
    qmTitle.innerHTML = translatedTitle

  }

Upvotes: 0

Views: 145

Answers (1)

JonoJames
JonoJames

Reputation: 1223

Ok If you click the title it will change according to your map

What you needed to do is add an event listener for the click event This sample shows you how to do that

I also exended your map so it translates backwards as well .. 

var languageMap = {
    'English1': 'French1',
    'English2': 'French2',
    'French1': 'English1',
    'French2': 'English2'
}
  var qmTitle = document.getElementById('toolTitle')
  function translateTitle() {
   // var qmTitle = document.getElementById('toolTitle')
    var qmTitleText = qmTitle.innerHTML    
    var translatedTitle = languageMap[qmTitleText]


    qmTitle.innerHTML = translatedTitle

  }

qmTitle.addEventListener("click", translateTitle);
<h2 id="toolTitle">English1</h2>

Upvotes: 1

Related Questions