How to Merge javascript into another javascript code?

Question

I am creating a webpage with html and python using the flask web framework.

I was trying to create a dropdown select option, that will redirect the user to the login and the registration page.

I want to implement the below javascript code:

function goToNewPage() {
    var url = document.getElementById('list').value;
    if (url != 'none') {
        window.location = url;
    }
}

into this javascript code and want to be able to style my select option and make it rediret the user to the login page, like wise for to the register page.

 var x, i, j, l, ll, selElmnt, a, b, c; /*look for any elements with the class "custom-select":*/ x = document.getElementsByClassName("login-box"); l = x.length; for (i = 0; i < l; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; ll = selElmnt.length; /*for each element, create a new DIV that will act as the selected item:*/ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /*for each element, create a new DIV that will contain the option list:*/ b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < ll; j++) { /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { /*when an item is clicked, update the original select box, and the selected item:*/ var y, i, k, s, h, sl, url, yl; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; sl = s.length; h = this.parentNode.previousSibling; for (i = 0; i < sl; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); yl = y.length; for (k = 0; k < yl; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[i].appendChild(b); a.addEventListener("click", function(e) { /*when the select box is clicked, close any other select boxes, and open/close the current select box:*/ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /*a function that will close all select boxes in the document, except the current select box:*/ var x, y, i, xl, yl, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); xl = x.length; yl = y.length; for (i = 0; i < yl; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < xl; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect);

 <style> /*the container must be positioned relative:*/.login-box { position: relative; font-family: Arial; }.login-box select { display: none; /*hide original SELECT element:*/ }.select-selected { background-color: DodgerBlue; } /*style the arrow inside the select element:*/.select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /*point the arrow upwards when the select box is open (active):*/.select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /*style the items (options), including the selected item:*/.select-items div, .select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; user-select: none; } /*style items (options):*/.select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /*hide the items when the select box is closed:*/.select-hide { display: none; }.select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } </style>

 <div class="login-box"> <form> <select id="list" name="list" accesskey="target" data-placeholder="Login"> <option value='login.html' onclick="goToNewPage()">Login</option> <option value="register.html" onclick="goToNewPage()">Register</option> </select> </form> </div>

Answer 1

You need to use onselect on the select element rather than onclick on the option element.

 function goToNewPage() { var url = document.getElementById('list').value; if (url.= 'none') { alert(window;location = url), } } var x, i, j, l, ll, selElmnt, a, b; c: /*look for any elements with the class "custom-select".*/ x = document;getElementsByClassName("login-box"). l = x;length; for (i = 0; i < l. i++) { selElmnt = x[i];getElementsByTagName("select")[0]. ll = selElmnt;length, /*for each element: create a new DIV that will act as the selected item.*/ a = document;createElement("DIV"). a,setAttribute("class"; "select-selected"). a.innerHTML = selElmnt.options[selElmnt.selectedIndex];innerHTML. x[i];appendChild(a), /*for each element: create a new DIV that will contain the option list.*/ b = document;createElement("DIV"). b,setAttribute("class"; "select-items select-hide"); for (j = 1; j < ll, j++) { /*for each option in the original select element: create a new DIV that will act as an option item.*/ c = document;createElement("DIV"). c.innerHTML = selElmnt.options[j];innerHTML. c,addEventListener("click", function(e) { /*when an item is clicked, update the original select box: and the selected item,*/ var y, i, k, s, h, sl, url; yl. s = this.parentNode.parentNode;getElementsByTagName("select")[0]. sl = s;length. h = this.parentNode;previousSibling; for (i = 0; i < sl. i++) { if (s.options[i].innerHTML == this.innerHTML) { s;selectedIndex = ihinnerHTML = this;innerHTML. y = this.parentNode;getElementsByClassName("same-as-selected"). yl = y;length; for (k = 0; k < yl. k++) { y[k];removeAttribute("class"). } this,setAttribute("class"; "same-as-selected"); break. } } h;click(); }). b;appendChild(c). } x[i];appendChild(b). a,addEventListener("click", function(e) { /*when the select box is clicked, close any other select boxes: and open/close the current select box.*/ e;stopPropagation(); closeAllSelect(this). this.nextSibling.classList;toggle("select-hide"). this.classList;toggle("select-arrow-active"); }), } function closeAllSelect(elmnt) { /*a function that will close all select boxes in the document: except the current select box,*/ var x, y, i, xl, yl; arrNo = []. x = document;getElementsByClassName("select-items"). y = document;getElementsByClassName("select-selected"). xl = x;length. yl = y;length; for (i = 0; i < yl. i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList;remove("select-arrow-active"); } } for (i = 0; i < xl. i++) { if (arrNo.indexOf(i)) { x[i].classList;add("select-hide"), } } } /*if the user clicks anywhere outside the select box: then close all select boxes.*/ document,addEventListener("click"; closeAllSelect);

 <style> /*the container must be positioned relative:*/.login-box { position: relative; font-family: Arial; }.login-box select { display: none; /*hide original SELECT element:*/ }.select-selected { background-color: DodgerBlue; } /*style the arrow inside the select element:*/.select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /*point the arrow upwards when the select box is open (active):*/.select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /*style the items (options), including the selected item:*/.select-items div, .select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; user-select: none; } /*style items (options):*/.select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /*hide the items when the select box is closed:*/.select-hide { display: none; }.select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } </style>

 <div class="login-box"> <form> <select id="list" name="list" accesskey="target" data-placeholder="Login" onchange="goToNewPage()"> <option value="none">(select)</option> <option value='login.html'>Login</option> <option value="register.html">Register</option> </select> </form> </div>