CODEWITHSUNDEEP
javascripthtmlqueryselector
Kaden Hansen
Kaden Hansen

Reputation: 31

My JavaScript querySelector is returning a null value when i try to access a form submission on the webpage

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.

Upvotes: 0

Views: 245

Answers (1)

emptyhua
emptyhua

Reputation: 6692

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>

Upvotes: 2

Related Questions