How to redirect from one html page to another on button click in javascript?

Question

I have two html pages page_1.html and page_2.html . In page_1.html , I have a button, which upon being clicked should redirect to page_2.html . But it should redirect only when the button has a charteuse background color.

So, in page_1.html , I have a button:

Organization:<div id="org"><input type="checkbox" id="cb1" >ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
                     <input type="checkbox" id="cb2" >Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
<button id="button" onmouseover="hovar()" onclick="submit()" >Register</button>
    <script src="back_end.js" async></script>

My javascript (back_end.js) :

    function hovar(){

    var phone=document.getElementById("ph_number").value;
    var btn=document.getElementById("button");

    if (phone.length!=10){
        btn.style.backgroundColor="lightsalmon"
    }
    else{
        btn.style.backgroundColor="chartreuse" 
        btn.style.color="black"
    }
}

function submit(){

    var btn=document.getElementById("button");

    if (getComputedStyle(btn).backgroundColor == "charteuse"){
        window.location.href="page_2.html";
    }
}

But, it doesn't redirect to page_2.html . What am I missing here? I have also tried window.location.replace("page_2.html") , but it's the same.

EDIT: I have changed the code a little, it's from a project I'm doing. I have also tried getComputedStyle(document.getElementById("button")).backgroundColor , but it doesn't work.

Another thing that I've noticed, is that when I use:

if (btn.style.backgroundColor == "charteuse"){
        //console.log(true)
        location.href="page_2.html";
    }

it prints true into the console but still doesn't redirect to page_2.html .

But if I use:

if (getComputedStyle(btn).backgroundColor == "charteuse"){
            //console.log(true)
            window.location.href="page_2.html";
        }

it doesn't print true into the console. But nevertheless, in both the cases, it doesn't redirect to page_2.html

Answer 1

The styles property doesn't directly reflect your CSS, so running

if(document.getElementById("button").style.backgoundColor=="red"){

never works.

What you can do is change the color to red using javascript:

function changeButtonColor(color) {
    document.getElementById("button").style.backgoundColor = color;
}

changeButtonColor('red');

So you do this, wherever you need to change the background color, your if statement will work correctly and you can switch.

Answer 2

ElementCSSInlineStyle.style

The style property is used to get as well as set the inline style of an element. When getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.

https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style

So your if-conditon document.getElementById("button").style.backgoundColor == "red" does never return true because the color is defined in your css-file and not as an inline argument.

A solution would be using getComputedStyle(element) which returns the actuall style from the css-file .

getComputedStyle(document.getElementById("button")).backgroundColor == "red"

as explained here https://zellwk.com/blog/css-values-in-js/

Also in your css , you can remove the quotationmarks around "red" as mentioned by @George

Answer 3

so you should compare like this

var btn=document.getElementById("button");
 


  if (getComputedStyle(btn).backgroundColor == "rgb(127, 255, 0)"){
      window.location.href="page_2.html";
  }
}