I am trying to use my Pig Latin generator on a local webpage. everything seems to work as intended, however, when i use the form to input a string, the debugging screen shows the queryselector as having returned null.
also, as a side note, the alert is sent every time I refresh the webpage. if you could also let me know how to fix/disable that I would appreciate it. thanks.
My html form element
<form onsubmit="translate(); return: false;">
<input id="string" type="text">
<input type="submit">
</form>
calling the .js file in the head
<script src="pigLatin.js" defer></script>
</head>
my querySelector line
function translate() {
let str = document.querySelector('#string').value;
Thanks.
HTML element has a attribute "translate" , same name with your function and make your function invisible. you could just rename your function or use it with a window. prefix.
function translate() {
let str = document.querySelector('#string').value;
console.log("strint value:", str);
}<form onsubmit="console.log('translate type:', typeof translate); return false;">
<input id="string" type="text">
<input type="submit" value="not work">
</form>
<form onsubmit="window.translate(); return false;">
<input id="string" type="text">
<input type="submit" value="works">
</form>