Блог

Я хотел добавить переключатель перевода, который будет переводить между двумя языками формы. Я могу выбрать html — теги, но как я могу выбрать заполнитель внутри входного тега. У меня есть пользовательский документ.querySelector для выбора пользовательских классов, которые я добавил только для языка chagening. Я также добавил пользовательский класс в поле ввода, но не смог изменить текст заполнителя. вот мой html-код

 lt;!DOCTYPE htmlgt;  lt;html lang="en"gt;  lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1"gt;  lt;titlegt;language switch using JavaScriptlt;/titlegt;  lt;link rel="stylesheet" href="./main.css"gt;  lt;/headgt;  lt;stylegt;  body {  font-family: Roboto, Helvetica, sans-serif;  font-size:20px;  background-color: black;  }    * {  box-sizing: border-box;  }    /* Add padding to containers */  .container {  padding: 16px;  background-color: white;  }    /* Full-width input fields */  input[type=text], input[type=password] {  width: 100%;  padding: 15px;  margin: 5px 0 22px 0;  display: inline-block;  border: none;  background: #f1f1f1;  }    input[type=text]:focus, input[type=password]:focus {  background-color: #ddd;  outline: none;  }    /* Overwrite default styles of hr */  hr {  border: 1px solid #f1f1f1;  margin-bottom: 25px;  }    /* Set a style for the submit button */  .registerbtn {  background-color: #04AA6D;  color: white;  padding: 16px 20px;  margin: 8px 0;  border: none;  cursor: pointer;  width: 100%;  opacity: 0.9;  font-size: 22px;  }    .registerbtn:hover {  opacity: 1;  }    /* Add a blue text color to links */  a {  color: dodgerblue;  }    /* Set a grey background color and center the text of the "sign in" section */  .signin {  background-color: #f1f1f1;  text-align: center;  }  lt;/stylegt;  lt;bodygt;  lt;div class="container"gt;  lt;div class="langWrap"gt;  lt;a href="#" language='english' class="active"gt;ENlt;/agt;  lt;a href="#" language='bangla'gt;BNlt;/agt;   lt;/divgt;   lt;div class="content"gt;     lt;form action=""gt;  lt;div class="container"gt;  lt;h1 id="h1title" class="lTitle"gt;Registerlt;/h1gt;  lt;p class="fillUpInstruction"gt;Please fill in this form to create an account.lt;/pgt;  lt;hrgt;    lt;label for="email" class="emailLabel"gt;lt;bgt;Emaillt;/bgt;lt;/labelgt;  lt;input type="text" placeholder="Enter Email" class="emailPlaceHolder" name="email" id="email" requiredgt;    lt;label for="psw" class="passwordLabel"gt;lt;bgt;Passwordlt;/bgt;lt;/labelgt;  lt;input type="password" placeholder="Enter Password" class="passwordPlaceHolder" name="psw" id="psw" requiredgt;    lt;label for="psw-repeat" class="repeatPasswordLabel"gt;lt;bgt;Repeat Passwordlt;/bgt;lt;/labelgt;  lt;input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" requiredgt;  lt;hrgt;  lt;p class="agreementText"gt;By creating an account you agree to our Terms amp; Privacy    lt;/pgt;  lt;a href="#" class="termsPolicy"gt;Terms amp; Privacylt;/agt;.    lt;button type="submit" class="registerbtn"gt;Registerlt;/buttongt;  lt;/divgt;    lt;div class="container signin "gt;  lt;p class="questionForExistingAccount"gt;Already have an account?lt;/pgt;  lt;a href="#" class="redirectToExistingAccount"gt;Sign inlt;/agt;.  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;/divgt;    lt;/bodygt;  lt;/htmlgt;  

Вот мой скрипт для смены языка

 lt;scriptgt;  const langEl = document.querySelector('.langWrap');  const link = document.querySelectorAll('a');   const lTitle = document.querySelector('.lTitle');  const fillUpInstruction = document.querySelector('.fillUpInstruction');  const emailLabel = document.querySelector('.emailLabel');  const emailPlaceHolder = document.querySelector('.emailPlaceHolder');  const passwordLabel = document.querySelector('.passwordLabel');  const passwordPlaceHolder = document.querySelector('.passwordPlaceHolder');   const repeatPasswordLabel = document.querySelector('.repeatPasswordLabel');  const questionForExistingAccount = document.querySelector('.questionForExistingAccount');  const agreementText = document.querySelector('.agreementText');  const termsPolicy = document.querySelector('.termsPolicy');  const registerbtn = document.querySelector('.registerbtn');  const redirectToExistingAccount = document.querySelector('.redirectToExistingAccount');   link.forEach(el =gt; {  el.addEventListener('click', () =gt; {  langEl.querySelector('.active').classList.remove('active');  el.classList.add('active');   const attr = el.getAttribute('language');   lTitle.textContent = data[attr].lTitle;  fillUpInstruction.textContent = data[attr].fillUpInstruction;  emailLabel.textContent = data[attr].emailLabel;  emailPlaceHolder.textContent = data[attr].emailPlaceHolder;  passwordLabel.textContent = data[attr].passwordLabel;   passwordPlaceHolder.placeholder = data[attr].passwordPlaceHolder;   repeatPasswordLabel.textContent = data[attr].repeatPasswordLabel;  questionForExistingAccount.textContent = data[attr].questionForExistingAccount;  agreementText.textContent = data[attr].agreementText;  termsPolicy.textContent = data[attr].termsPolicy;  registerbtn.textContent = data[attr].registerbtn;  redirectToExistingAccount.textContent = data[attr].redirectToExistingAccount;  });  });    var data = {  "english":   {   "lTitle": "Register",  "fillUpInstruction": "Please fill in this form to create an account.",  "emailLabel": "Email",  // "emailPlaceHolder": "Enter Email",  "passwordLabel": "Enter Password",  "passwordPlaceHolder": "Enter Password",  "repeatPasswordLabel": "Repeat Password",  "questionForExistingAccount": "Already have an account?",  "redirectToExistingAccount": "Sign In",  "agreementText": "By creating an account you agree to our",  "termsPolicy": "Terms amp; Privacy",  "registerbtn": "Register",  },  "bangla":   {   "lTitle": "নিবন্ধন",  "fillUpInstruction": "দয়া করে অ্যাকাউন্টটি তৈরি করতে এই ফর্মটি পূরণ করুন.",  "emailLabel": "ইমেইল",   "passwordLabel": "পাসওয়ার্ড লিখুন",  "passwordPlaceHolder": "পাসওয়ার্ড লিখুন",  "repeatPasswordLabel": "আবারও পাসওয়ার্ড লিখুন ",  "questionForExistingAccount": "ইতিমধ্যে একটি সদস্যপদ আছে? ",   "redirectToExistingAccount": "সাইন ইন ",   "agreementText": "একটি অ্যাকাউন্ট তৈরি করে আপনি আমাদের শর্তাবলী এবং গোপনীয়তার সাথে সম্মত হবেন ।",   "termsPolicy": "শর্তাবলী এবং গোপনীয়তা",   "registerbtn": "নিবন্ধন",   } ,    }  lt;/scriptgt;  

Я могу обновить ваш заполнитель таким образом с помощью консоли инструментов разработчика:

 var attr = "bangla" emailText = document.querySelector('#email') emailText.placeholder = data.bangla.emailLabel