Logging the problem variable returns the option selected in the dropdown, but logging the depth variable returns nothing.
<body>
<form class="card p-4" method="POST" id="form">
<label for="problem_selector">Problem</label>
<select id="problem_selector" class="form-control" name="problem_name">
<option value="3and5multiples.php">Multiples of 3 and 5</option><br>
<option value="even_fibonacci.php">Even fibonacci numbers</option><br>
</select>
<label for="depth_input">Depth</label>
<input id="depth_input" class="form-control" name="depth_input">test</input>
<input id="submit_button" value = "submit" type="button" class="btn btn-primary"/>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
let problem = document.getElementById("problem_selector").value;
let depth = document.getElementById("depth_input").value;
const button = document.getElementById("submit_button");
button.addEventListener('click', function() {
console.log(depth);
console.log(problem);
});
</script>
Screenshot taken on clicking the submit button.
The depth value should be logged along with the problem value once the button is pressed.
I’ve already changed the submit button to an input button, but that doesn’t seem to have helped. Previously the value returned was null; but now the value is just empty.
>Solution :
Your code that reads the value of the buttons is running immediately on page load. You need to read the values after the button is clicked:
const button = document.getElementById("submit_button");
button.addEventListener('click', function() {
let problem = document.getElementById("problem_selector").value;
let depth = document.getElementById("depth_input").value;
console.log(depth);
console.log(problem);
});