Retrieve results of 3 lines (Ps) by entering a word in the text area and clicking search.
If the word is found after clicking the button, a span will be displayed with the count of occurrences as well as the highlighted P(s) where it was found.
If the word is not found after clicking the button, a span will display that the word was not found.
IT WORKS!
The issue lies in updating the count in the span if the same word is searched for a second time
For instance, searching 'Suns' the first time retrieves a count of 2 because it was found twice. If searched again, the count remains the same, while I want it to update to 4. A new word search should display only the new word's result without affecting the first word count.
but1 = document.querySelector("#searchbutton");
but1.addEventListener('click', searchClick);
function searchClick() {
var searchPhrase = document.querySelector("#searchtext").value;
var main = document.querySelector("#main");
var mainParas = main.querySelectorAll(" p ");
for (var i = 0; i < mainParas.length; i++) {
if (mainParas[i].textContent.indexOf(searchPhrase) >= 0) {
mainParas[i].className = "highlighted"; }
else {
mainParas[i].className = null;
}
}
}
function count_search() {
var allPs = "";
var element = document.getElementById("output");
element && element.parentNode.removeChild(element);
let span = document.createElement('span');
span.setAttribute("id", "output");
document.body.appendChild(span);
var searchPhrase = document.querySelector("#searchtext").value;
var mainParas = document.querySelectorAll("#main p");
mainParas.forEach(el => allPs += el.innerText);
var regex = new RegExp(searchPhrase, "gi");
var times = allPs.match(regex);
document.getElementById("output").innerHTML = times ? `How many times I searched for the word ${searchPhrase}: ${times.length}` : "No matches found";
}
.highlighted {
background-color: yellow;
border: 1px dashed #666600;
font-weight: bold;
}
#output{
position:relative;
top:50px;
}
<html>
<head>
<script src="dom_2_alt.js" type="text/javascript" defer></script>
<link href="outstyle.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="main">
<p>The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ...</p>
<p>The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted ...</p>
<p>On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ...</p>
<ul>
<li>Richard L. Bloch, investment broker/real estate developer...</li>
<li>Karl Eller, outdoor advertising company owner and former...</li>
<li>Donald Pitt, Tucson-based attorney;</li>
<li>Don Diamond, Tucson-based real estate investor.</li>
</ul>
</div>
<p>
Page by Marty Stepp. <br />
Some (all) information taken from Wikipedia.
</p>
<hr />
<div>
Search for text:
<input id="searchtext" type="text" />
<button id="searchbutton" onclick="count_search()"> Search
</button>
</div>
</body>
</html>