The getElementByID isnt showing the value-CodePudding

PLeaseHelp. it wont show the Value, even for form authentication, to get username & password values,I was trying the same methods.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1 id="result">Selected movie is </h1>

    <select id="movie" onchange="showmovie()">
        <option value="Spiderman">Spiderman</option>
        <option value="Spiderman2">Spiderman2</option>
        <option value="Spiderman3">Spiderman3</option>

    </select>
</body>
</html>

<script>
    var movie = document.getElementById("movie").value

    function showmovie(){
        alert("Changed")
       document.getElementById("result").innerHTML="Movie chosen is" movie
    }
</script>

CodePudding user response：

Try with this function showmovie

 <script>
    function showmovie() {
        //Selected option
        var selectedMovie = document.getElementById("movie").value;
        document.getElementById("result").innerHTML = "Movie chosen is "   selectedMovie;
    }
</script>

CodePudding user response：

The issue here is because of the line var movie = document.getElementById("movie").value being executed just one time at the beginning (you could verify that adding console.log(movie); just after the movie variable declaration)

(movie stores then the value 'Spierdaman') and it never executes again with the calls for showmovie() function, so you could just move the movie declaration line above inside the function so it executes each time the action occurs and then having the good values.

Other details : To have a compliant code i suggest moving the script bloc to part just before and dont forget to add semicolons ';' at the end of each line ! Better approach would be to use an eventListener as suggested by @T.J. Crowder in comments section above