Why doesn't this JavaScript script respond to the onchange() function from a <script> div-CodePudding

I'm trying to make a small function that inverts the image's colours depending on what option they pick from the drop-down menu. From some online research, I saw I could use onchange() function to make it work but for some reason, the function isn't responding properly. Main parts in the code are the select div called "color" and the invert function

 <?php
    session_start();

    include("database.php"); 

    if($_SERVER['REQUEST_METHOD'] == "POST")
    {
        $text = $_POST['text_custom'];
        $ingredients = $_POST['ingredient'];
        $color = $_POST['color'];
        echo $color;
        echo $text;
        echo $ingredients;

    }


?>

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="bootstrap customiser.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
    <div class="containter">
        <div class="row">
            <div class="col-3 offset-1 d-flex justify-content-end" id="logo">
                <a href="http://localhost/website/test_1_customiser.php"><img id="logoclick" src="smiding logo.png"
                        alt="logo"></a>
            </div>

            <div class="col-7 offset-1" id="navbar">
                <a href="customizer_bootstrap.php">Customiser</a>


                <a href="news.html">News</a>


                <a href="about us.html">About us</a>

                <?php
                if (!empty($_SESSION['logged'])){
                    echo '<a href="account.php">Account</a>';
                }else{
                    echo '<a href="login.php">Account</a>';
                }
                ?>
            </div>

        </div>
        <br>
        <br>
        <div class="row">
            <div class="col-md-12 text-center">
                <h1>Customiser</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-1">
                <img src="label.png" id="Gin_Label">
            </div>
            <div id="labeltext">
                text

            </div>
            
            <div class="col-md-4 offset-md-2">
                <form method="post">
                <div id="textchanger">
                    <h3>Text Picker</h3>
                    <input type="text" id="textpicker" name="text_custom">
                    <input type="button" id="update" value="Click me!" onclick="changetext()">


                </div>
                <div id="colourchanger" class="row"></div>
                <h3>Colour Picker</h3>
                <div class="row">


                    <div class="col-md-1">
                        <select name="color" id="color" onchange="invert(value)">
                            <option value="White" id="option1">White</option>
                            <option value="Black" id="option2">Black</option>
                        </select>
                    </div>
                </div>
                <br>
                <br>
                <div class="row">
                    <div class="col-7">
                        <h3>Extra Ingredient</h3>
                        <select name="ingredient">
                            <option value="none">None</option>
                            <option value="lemon">Lemon</option>
                            <option value="orange">Orange</option>
                        </select>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-5">
                        
                        <button type="submit">Submit</button>
                
                    </div>
                </div>
                </form>

            </div>
        </div>
    </div>



    </div>


    </div>
    <script>
        function changetext() {
            let bruh = document.getElementById('textpicker').value;
            document.getElementById('labeltext').innerHTML = bruh;
        }

        function invert(value) {
            if ((value = "Black"))
            {
                document.getElementById("Gin_Label").style.filter = "invert(100%)";
                document.getElementById("labeltext").style.color = "white";
            }
            if ((value = "White"))
            {
                document.getElementById("Gin_Label").style.filter = "invert(0%)";
                document.getElementById("labeltext").style.color = "black";
            }
            

        }

    </script>
</body>

</html>

CodePudding user response：

The this in the html select element references itself. In javascript the element parameter is the select and just use the value attribute for the checks, using (==) or preferably (===) and not (=).

function invert(element) {
  var value = element.value;
    if ((value === "Black"))
    {
        // document.getElementById("Gin_Label").style.filter = "invert(100%)";
        document.getElementById("labeltext").style.color = "white";
    }
    
    if ((value === "White"))
    {
        // document.getElementById("Gin_Label").style.filter = "invert(0%)";
        document.getElementById("labeltext").style.color = "black";
    }
}

<select name="color" id="color" onchange="invert(this);">
    <option value="White" id="option1">White</option>
    <option value="Black" id="option2">Black</option>
</select>

<div id="labeltext" style="color: #0000ff; background-color: #d0d0d0;">change color</div>