How do I properly display form HTML input
Question
My code isn't working as I intend it to, and I don't know how to fix it. So, whenever the person types 'hello' in the box, and then presses Submit, the paragraph hat says hi is supposed to display 'good job', but it's not.
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <textarea id="thesearchh" style="resize: none;"></textarea> <button onclick="submitSearch()">Submit</button> <p id="searchResult">hi</p> <script> function submitSearch() { if(document.getElementById('thesearchh').includes('hello') == true) { document.getElementById('searchResult').innerHTML = 'good job'; } } </script> </body> </html>
3 answers
solution1
0 2022-06-09 17:50:25
you should check input value with document.getElementById(inputId).value not with includes method. includes method works in arrays and strings but not on DOM elements.
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <textarea id="thesearchh" style="resize: none;"></textarea> <button onclick="submitSearch()">Submit</button> <p id="searchResult">hi</p> <script> function submitSearch() { if(document.getElementById('thesearchh').value === "hello") { document.getElementById('searchResult').innerHTML = 'good job'; } } </script> </body> </html>
solution2
0 2022-06-09 18:06:02
- Stop using inline attributes like: CSS
styleand JSon*handlers. CSS and JS should be in their respective tags or files. - Use Element.addEventListener() instead of the onclick attribute handler
- Use InputElement.value to get an :input's (
<textarea>in your case) value. - Use
===to compare it with the desired"hello"string - PS: are you sure you need a
<textarea>instead of<input type="text">? - Additionally you might want to use String.prototype.trim() to remove whitespaces from your user-input string before comparing. That's up to you.
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> #search { resize: none; } </style> </head> <body> <textarea id="thesearchh"></textarea> <button type="button" id="thesubmitt">Submit</button> <p id="searchResult">hi</p> <script> // DOM Utility functions: const el = (sel, par) => (par??document).querySelector(sel); // Task: Match value "hello": const elSearch = el("#thesearchh"); const elSubmit = el("#thesubmitt"); const elResult = el("#searchResult"); const submitSearch = () => { const userInput = elSearch.value; if (userInput === "hello") { elResult.textContent = 'good job'; } }; elSubmit.addEventListener("click", submitSearch); </script> </body> </html>
solution3
0 2022-06-09 18:51:32
Just added .value in your code
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <textarea id="thesearchh" style="resize: none;"></textarea> <button onclick="submitSearch()">Submit</button> <p id="searchResult">hi</p> <script> function submitSearch() { if(document.getElementById('thesearchh').value.includes('hello') == true) { document.getElementById('searchResult').innerHTML = 'good job'; } } </script> </body> </html>
here you can see the line iam added .value
if(document.getElementById('thesearchh').value.includes('hello') == true){}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I properly validate the form using input radios?
How do I display an error message if the input is wrong on HTML
How do I assign an array to an HTML form input value?
How do I pass maps Infowindow values to HTML input form
How do I validate two input fields on HTML form?
How to Display User Input of a HTML Form
How do I make an array display properly?
This is code for a form, which involves input validation. How do I make the JS code function properly?
How do I properly link text from an input field in HTML to JavaScript
can i display my text file data in html form input field? if yes, please tell me how?
Related Tags