How do I properly display form HTML input-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

Stop using inline attributes like: CSS style and JS on* 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>

CodePudding user response：

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){}