how to change language for placeholder text?

January 20, 2022

i cannot change language for my placeholder text. i can only change language for normal button text , head text but i cannot change language for placeholder text. please help to suggest anything i need to add on in my code. thanks

   <!DOCTYPE html>
    <html>
    <head>
        <title>Node.js app</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="Style.css" />
        <script src="https://kit.fontawesome.com/a076d05399.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    </head>
    <body>
    
        <label class="switch">
            <input type="checkbox" id="togBtn">
            <div class="slider round">
                <span language='myanmar' class="on">MYN</span>
                <span language='english' class="off">ENG</span>
            </div>
        </label>
    
        <div class="form-group">
            <input type="text" class="form-control usrplaceholder" placeholder="Username" required="required">
        </div>
        <div class="form-group">
            <input type="password" class="form-control pwplaceholder" name="pw" placeholder="Password" required="required">
        </div>
    
        <script>
    
            document.querySelector('#togBtn').addEventListener('input', (event) => {
                document.querySelector('.usrplaceholder').textContent = data[event.currentTarget.checked ? 'myanmar' : 'english'].usrplaceholder;
                document.querySelector('.pwplaceholder').textContent = data[event.currentTarget.checked ? 'myanmar' : 'english'].pwplaceholder;
            });
    
            var data = {
                "english": {
                    "usrplaceholder": "Username",
                    "pwplaceholder": "Password"
                },
                "japanese": {
                    "usrplaceholder": "အသုံးပြုသူအမည်",
                    "pwplaceholder": "စကားဝှက်",
                }
            }
        </script>
    </body>
    </html>

>Solution :

There’s two problems in your code.

Firstly you’re trying to access the myanmar property of the data object when it doesn’t exist. The only properties, in the example code at least, as english and japanese.

Secondly, the input elements do not have a textContent property. From the context it looks like you’re trying to set the placeholder property instead.

document.querySelector('#togBtn').addEventListener('input', (event) => {
  document.querySelector('.usrplaceholder').placeholder = data[event.currentTarget.checked ? 'japanese' : 'english'].usrplaceholder;
  document.querySelector('.pwplaceholder').placeholder = data[event.currentTarget.checked ? 'japanese' : 'english'].pwplaceholder;
});

var data = {
  "english": {
    "usrplaceholder": "Username",
    "pwplaceholder": "Password"
  },
  "japanese": {
    "usrplaceholder": "အသုံးပြုသူအမည်",
    "pwplaceholder": "စကားဝှက်",
  }
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<label class="switch">
  <input type="checkbox" id="togBtn">
  <div class="slider round">
    <span language='myanmar' class="on">MYN</span>
    <span language='english' class="off">ENG</span>
  </div>
</label>

<div class="form-group">
  <input type="text" class="form-control usrplaceholder" placeholder="Username" required="required">
</div>
<div class="form-group">
  <input type="password" class="form-control pwplaceholder" name="pw" placeholder="Password" required="required">
</div>