I need some assistance with my website development project. I want to implement a feature where, if the user enters input but doesn't submit anything, instead of triggering the function togglePopup(), a different function called togglePopup2() will be activated. How can I achieve this functionality? Below is the code snippet I am currently working with:
<form autocomplete="off" >
<input style="border: 2px solid #222; border-radius: 6px;" type="text" id="lname" name="lname" maxlength="10"><br><br><br>
<input style="border: none; border-radius: 6px; color: ivory; text-shadow: 0px 10px 20px; #222;background: dodgerblue; padding: 15px; font-size: 15px;" value="Submit environment name" type="button" onclick="togglePopup()">
</form><script>
var x;
document.querySelectorAll('input')[1].addEventListener("click", ()=>{
x = document.querySelector('input').value;
})
</script>
Currently, when the button is clicked after entering input, the togglePopup() function is triggered. I would like to modify this behavior so that the function only runs when there is text in the input field. If no text is entered, I want the alternative function togglePopup2() to run instead. What steps should I take to make this happen?