[Solved] Undefined In JavaScript

by


Note you read the values of “jobValue” and “twoPeople” just once when the site is loading.
Here is a possible solution:

<!DOCTYPE html>
<html>
<title>Lets See</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<style>
    h1 {
        font-family: cursive;
    }
    button {
        font-family: josefin sans;
        font-size: 30px;
        border-radius: 10px;
        background-color: red;
        color: white;
    }
    input {
        font-family: josefin sans;
        font-size: 25px;
    }

</style>
<body>

<input id="txtJob" type="text" name="txtJob"> & <input type="text" id="twoPpl" name="twoPpl"> <br><br>
<button onclick="myFunction()">Test</button>

<h1 id="people" name="people" style="float: right;"></h1><br><br><h1 style="float: right;">%</h1><h1 style="float: right;" id="demo"></h1>

<script>
    function myFunction() {
        var jobValue = document.getElementById('txtJob').value
        var twoPeople = document.getElementById('twoPpl').value
        var skip = "&nbsp;& ";
        var newVar = jobValue + skip;
        var finVar = newVar + twoPeople;
        var x = document.getElementById("demo")
        var y = document.getElementById("name");
        x.innerHTML = Math.floor((Math.random() * 100) + 1);
        document.getElementById('people').innerHTML = finVar;
    }
</script>

</body>
</html>

1

solved Undefined In JavaScript