<div class="container">
<input id="word1" type="text" placeholder="Enter First Word"><br>
<input id="submit1" type="submit" name="submit" value="check">
</div>
<script type="text/javascript">
let word1 = document.getElementById('word1');
let submit = document.getElementById('submit1');
function display(){
alert(word1.textContent);
alert(word1.innerText);
alert(word1);
}
submit.addEventListener('click',display,false);
</script>the browser alerts with empty string for both textContent and innerText and i don't know why is this happening
input doesn't have textContent, if you want get it's value, you need to go with input.value.
<div class="container">
<input id="word1" type="text" placeholder="Enter First Word"><br>
<input id="submit1" type="submit" name="submit" value="check">
</div>
<script type="text/javascript">
let word1 = document.getElementById('word1');
let submit = document.getElementById('submit1');
function display(){
alert(word1.value);
}
submit.addEventListener('click',display,false);
</script>