InnerHtml not working

<select id="choice" >
    <option value="english">english </option>
    <option value="spanich"> spanich </option>
    <option value="french"> french</option>
</select>
<button id="btn" onclick="wich();">translate</button>
<p id="title" >welcome to wonder world </p>

    <script >
  

btn.onclick = function wich(){
    let btn=document.getElementById("btn");
    let choice=document.getElementById("choice").value;    
    let title=document.getElementById("title").innerHTML; 
if(choice === "english"){
   document.title ="welcome to wonder world ";
   document.body.style.background="brown";
}
 if(choice === "french"){
    document.title="bienvenue dans le monde des merveilles";
    document.body.style.background="green";
}
if(choice === "spanich"){
    document.title="Bienvenida a preguntarse mundo";
    document.body.style.background="red";
}
}

Iam having troubl with this code evry thing working fine except from the title whetever i tried its not changing i don’t know what im doing wrong .
Sorry for my english
And thanks

well, innerHtml works both ways: you can retrieve/get the value like you do:

let title=document.getElementById("title").innerHTML; 

or the other way around, where you set the value:

let title=document.getElementById("title");
title.innerHTML = 'set value';

ideally, when you only want to insert text use textContent (safer then innerHTML)

Thanks for your answer i tried that still not working i don’t know what to do

Can I see what you tried? I appreciate you hold me in such a high regard that I can now magically help you further

btn.onclick = function wich(){
let btn=document.getElementById(“btn”);
let choice=document.getElementById(“choice”).value;
let title=document.getElementById(“title”);
if(choice === “english”){
document.title.textContent ='welcome to wonder world ';
document.body.style.background=“brown”;
}
if(choice === “french”){
document.title.textContent=‘bienvenue dans le monde des merveilles’;
document.body.style.background=“green”;
}
if(choice === “spanich”){
document.title.textContent=‘Bienvenida a preguntarse mundo’;
document.body.style.background=“red”;
}
}
Sorry and thanks for your help

here:

document.title.textContent

why do you use document.title?

I simply use title (the variable in which you stored the element retrieved by id).

document.body works because body is a direct child of document.

1 Like

btn.onclick = function wich(){
let btn=document.getElementById(“btn”);
let choice=document.getElementById(“choice”).value;
let title=document.getElementById(“title”);
if(choice === “english”){
title.textContent ='welcome to wonder world ';
document.body.style.background=“brown”;
}
if(choice === “french”){
title.textContent=‘bienvenue dans le monde des merveilles’;
document.body.style.background=“green”;
}
if(choice === “spanich”){
title.textContent=‘Bienvenida a preguntarse mundo’;
document.body.style.background=“red”;
}
}

Its working now thank you sooo much for your help

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.