I bring you a question about a <select> tag I am working for a website. I believe that the code I am writing here should be okay, but considering that I am quite new to js (I mainly know the basics of html and css, though it has been a while since I have worked with front-end web design :p), it is not surprising that it isn't working.
Basically, I have a <select> tag with different language options, and when clicking on one, you should be redirected to the page in the language you have selected. My attempt, with the little knowledge I have, was to get the info of the select tag, retrieving the value in the var direction to then open the link to the desired href.
Here is the code of the html (I post here only the header of basic_en.html, where the <select> is found):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" />
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
<title>Website</title>
</head>
<body>
<div class="header">
<nav>
<ul class="sidebar">
<li onclick=hideSidebar() class="item-nav">
<a>
<span class="material-symbols-outlined">
close
</span>
</a>
</li>
<li class="item-nav">
<h4><a href="basic_en.html">Home</a></h4>
</li>
<li class="item-nav">
<h4><a href="#">CV</a></h4>
</li>
<li class="item-nav">
<h4><a href="#">Contact</a></h4>
</li>
<li class="item-nav select-container">
<select id="lang-box">
<option class="item-lang" value="basic_en.html" onclick=changeLang()>EN</option>
<option class="item-lang" value="basic_es.html" onclick=changeLang()>ES</option>
<option class="item-lang" value="basic_fr.html" onclick=changeLang()>FR</option>
</select>
</li>
</ul>
<ul class="nav">
<li class="item-nav">
<h4><a href="basic_en.html">Name Surname</a></h4>
</li>
<li class="item-nav hide-maxwidth">
<h4><a href="#">CV</a></h4>
</li>
<li class="item-nav hide-maxwidth">
<h4><a href="#">Contact</a></h4>
</li>
<li class="item-nav select-container hide-maxwidth">
<select id="lang-box">
<option class="item-lang" value="basic_en.html" onclick=changeLang()>EN</option>
<option class="item-lang" value="basic_es.html" onclick=changeLang()>ES</option>
<option class="item-lang" value="basic_fr.html" onclick=changeLang()>FR</option>
</select>
</li>
<li onclick=showSidebar() class="item-nav menu-btn">
<a>
<span class="material-symbols-outlined">
menu
</span>
</a>
</li>
</ul>
</nav>
</div>
The CSS, the document style.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header{
color: white;
width: 100%;
}
nav{
background-color: black;
width: 100%;
height: 6.5rem;
position: fixed;
z-index: 68;
}
.nav{
display:flex;
justify-content: flex-end;
align-items: center;
width: 100%;
}
.item-nav{
list-style: none;
margin-right: 2rem;
font-size: 1.25rem;
}
.item-nav a{
text-decoration: none;
color: white;
}
.item-nav:first-child{
margin-right: auto;
margin-left: 2rem;
font-size: 4rem;
}
.sidebar{
position: fixed;
top: 0;
right: 0;
height: 100dvh;
height: 100vh;
width: 180px;
z-index: 69;
background-color: black;
color: white;
display: none;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 1rem;
float: right;
padding: 1rem;
}
.sidebar ul{
width: auto;
}
.menu-btn{
display: none;
}
.select-container{
position: relative;
width: 2rem;
}
#lang-box{
border: none;
appearance: none;
width: 100%;
color: white;
background-color: black;
cursor: pointer;
font-family: Cabin;
font-size: 1.25rem;
}
.item-lang{
background-color: black;
border-radius: 0;
}
@media only screen and (max-width: 930px){
.hide-maxwidth{
display: none;
}
.menu-btn{
display: block;
}
}
And the little JS involved in app.js:
/* Here is where I tried the redirection */
function changeLang(){
var select = document.getElementById('lang-box');
var direction = select.options[select.selectedIndex].value;
window.location.href = direction;
}
/* Functionality of sidebar (and yes, I know it does not close when the viewport is too big, I am working on it hahaha)*/
function showSidebar(){
const sidebar = document.querySelector('.sidebar');
sidebar.style.display = 'flex';
}
function hideSidebar(){
const sidebar = document.querySelector('.sidebar');
sidebar.style.display = 'none';
}
If you could indicate me what is wrong as well as any further advice to improve on JS (or in css as well), I would greatly appreciate it. Thanks in advance :)
After a bit of bashing my head against the wall and giving it some rest, I decided to just put everything in the onchange of the html and work with the value obtained from the select itself (this.value) instead of retrieving it to the app.js since I could not figure out for the life of me a way of doing it with the aforementioned changeLang() function in js file.
var direction = this.value;
this.value = this.options[0].value;
location = direction;
It is a bit lazy, but it is a good workaround. Thanks to @UmairSarfraz for the response (I did not realize the thing with the onchange attribute) since it helped me to get to a solution.
PS: Turns out there was indeed someone with a problem the same as mine but I did not find the post at the time of writing this question. Shoutout to the response of @TJCrowder, because not only did he gave the same answer, but also it gave a way of doing that function with an EventListener looking for changes. You can find more details clicking this link