Reputation: 21

How can I change language on placeholder of a input tag?

I wanted to add a translate toggle button which will translate between two language of a form. I can select the html tags but how can I select placeholder inside input tag. I've user document.querySelector to select the custom classes I've added only for chagening language. I've also added custom class to input field but couldn't be able to change grab the placeholder text. here is my html code

                <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <title>language switch using JavaScript</title>
                <link rel="stylesheet" href="./main.css">
            </head>
            <style>
                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;
                }
                </style>
            <body>
                <div class="container">
                    <div class="langWrap">
                        <a href="#" language='english' class="active">EN</a>
                        <a href="#" language='bangla'>BN</a> 
                    </div>

                    <div class="content">
                    

                        <form action="">
                            <div class="container">
                            <h1 id="h1title" class="lTitle">Register</h1>
                            <p class="fillUpInstruction">Please fill in this form to create an account.</p>
                            <hr>
                        
                            <label for="email" class="emailLabel"><b>Email</b></label>
                            <input type="text" placeholder="Enter Email" class="emailPlaceHolder" name="email" id="email" required>
                        
                            <label for="psw" class="passwordLabel"><b>Password</b></label>
                            <input type="password" placeholder="Enter Password" class="passwordPlaceHolder" name="psw" id="psw" required>
                        
                            <label for="psw-repeat" class="repeatPasswordLabel"><b>Repeat Password</b></label>
                            <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
                            <hr>
                            <p class="agreementText">By creating an account you agree to our Terms & Privacy
                                
                                </p>
                                <a href="#" class="termsPolicy">Terms & Privacy</a>.
                        
                            <button type="submit" class="registerbtn">Register</button>
                            </div>
                            
                            <div class="container signin ">
                            <p class="questionForExistingAccount">Already have an account?</p>
                            <a href="#" class="redirectToExistingAccount">Sign in</a>.
                            </div>
                        </form>
                    </div>
                </div>
                
            </body>
            </html>

Here is my script to change language

                <script>
                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 => {
                    el.addEventListener('click', () => {
                        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 & Privacy",
                        "registerbtn": "Register",
                    },
                    "bangla": 
                    { 
                        "lTitle": "নিবন্ধন",
                        "fillUpInstruction": "দয়া করে  অ্যাকাউন্টটি  তৈরি করতে এই ফর্মটি পূরণ করুন.",
                        "emailLabel": "ইমেইল", 
                        "passwordLabel": "পাসওয়ার্ড  লিখুন",
                        "passwordPlaceHolder": "পাসওয়ার্ড  লিখুন",
                        "repeatPasswordLabel": "আবারও পাসওয়ার্ড লিখুন ",
                        "questionForExistingAccount": "ইতিমধ্যে একটি সদস্যপদ আছে? ", 
                        "redirectToExistingAccount": "সাইন ইন  ", 
                        "agreementText": "একটি অ্যাকাউন্ট তৈরি করে আপনি আমাদের শর্তাবলী এবং গোপনীয়তার সাথে সম্মত হবেন ।", 
                        "termsPolicy": "শর্তাবলী এবং গোপনীয়তা", 
                        "registerbtn": "নিবন্ধন", 
                    } ,
                    
                    }
            </script>

Upvotes: 0

Answers (1)

Mark Seagoe

Reputation: 589

I can update your placeholder in this manner using dev tools console:

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

Upvotes: 1

How can I change language on placeholder of a input tag?

Answers (1)

Related Questions