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>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){}
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>style and JS on* handlers. CSS and JS should be in their respective tags or files.<textarea> in your case) value.=== to compare it with the desired "hello" string<textarea> instead of <input type="text">?<!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>