Reputation: 129

how to switch language by toggle button?

i have tried to switch the language from eng to Japenese by using toggle button.but it doesn't work. kindly help to suggest on it. here is my code:

<!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='japanese' class="on">JPN</span>
                <span language='english' class="off">ENG</span>
            </div>
        </label>
        <ul class="nav-items">
    <style>
    .switch {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 34px;
    }

    .switch input {
    display: none;
    }

    .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ca2222;
    -webkit-transition: .4s;
    transition: .4s;
    }

    .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    }

    input:checked + .slider {
    background-color: #2ab934;
    }

    input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
    -webkit-transform: translateX(55px);
    -ms-transform: translateX(55px);
    transform: translateX(55px);
    }

    /*------ ADDED CSS ---------*/
    .on {
    display: none;
    }

    .on, .off {
    color: white;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
    }

    input:checked + .slider .on {
    display: block;
    }

    input:checked + .slider .off {
    display: none;
    }
    </style>
    <div class="content">
        <h2 class="title">Hello World</h2>
    </div>
    <script>
        const sliderEl = document.querySelector('.slider');
        const link = document.querySelectorAll('span');
        const titleEl = document.querySelector('.title');
        const descrEl = document.querySelector('.description');

        link.forEach(el => {
            el.addEventListener('click', () => {
                sliderEl.querySelector('.active').classList.remove('active');
                el.classList.add('active');

                const attr = el.getAttribute('language');

                titleEl.textContent = data[attr].title;
                descrEl.textContent = data[attr].description;
            });
        });

        var data = {
            "english":
            {
                "title": "Hello World"

            },
            "japanese":
            {
                "title": "ハロー・ワールド"

            }
        }
    </script>

</body>
    </html>

Upvotes: 0

Answers (3)

グエンテイエンサン

Reputation: 11

        document.addEventListener('DOMContentLoaded', function () {
        var checkbox = document.querySelector('input[type="checkbox"]');

        checkbox.addEventListener('change', function () {
            
          if (checkbox.checked) {
            // do this
            console.log('Checked');
          } else {
            // do that
            console.log('Not checked' );
          }
        });
      });

https://jsfiddle.net/au3rvcwh/44/

You can use it to detect checkbox is checked or not and do what you want.

Upvotes: 1

Mark Baijens

Reputation: 13222

I changed your code a bit. I putted an event listener on the input event of the checkbox and change the text content to the corresponding language based on the fact if the checkbox is checked or not.

The active class didn't do anything in your example so I removed that.

The currentTarget property of the event object will get you the element that the event handler is attached too. This is used to see if the checkbox is checked or not.

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

var data = {
  "english": {
    "title": "Hello World"
  },
  "japanese": {
    "title": "ハロー・ワールド"
  }
}

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2ab934;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(55px);
  -ms-transform: translateX(55px);
  transform: translateX(55px);
}


/*------ ADDED CSS ---------*/

.on {
  display: none;
}

.on,
.off {
  color: white;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+.slider .on {
  display: block;
}

input:checked+.slider .off {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<ul class="nav-items">
  <div class="content">
    <h2 class="title">Hello World</h2>
  </div>
</ul>

Upvotes: 0

Dennis Wiemann

Reputation: 91

at first you have to add the ? in this statement sliderEl.querySelector('.active')?.classList.remove('active');

the next problem is, this line // descrEl.innerText = data[attr].description; because there is no description attribute in the object.

        "english":
        {
            "title": "Hello World"

        },

and i would use innerText here titleEl.innerText = data[attr].title;

<!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='japanese' class="on">JPN</span>
            <span language='english' class="off">ENG</span>
        </div>
    </label>
    <ul class="nav-items">
<style>
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}

.switch input {
display: none;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #2ab934;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.on {
display: none;
}

.on, .off {
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}

input:checked + .slider .on {
display: block;
}

input:checked + .slider .off {
display: none;
}
</style>
<div class="content">
    <h2 class="title">Hello World</h2>
</div>
<script>
    const sliderEl = document.querySelector('.slider');
    const link = document.querySelectorAll('span');
    const titleEl = document.querySelector('.title');
    const descrEl = document.querySelector('.description');

    link.forEach(el => {
        el.addEventListener('click', () => {
            sliderEl.querySelector('.active')?.classList.remove('active');
            el.classList.add('active');

            const attr = el.getAttribute('language');
            titleEl.innerText = data[attr].title;
          //  descrEl.innerText = data[attr].description;
        });
    });

    var data = {
        "english":
        {
            "title": "Hello World"

        },
        "japanese":
        {
            "title": "ハロー・ワールド"

        }
    }
</script>

</body>
</html>

Upvotes: 0

how to switch language by toggle button?

Answers (3)

Related Questions