I am trying to create an event function that's associated with a button that, when clicked after you input a phrase into the text area, counts how many times this phrase has appeared in the text (only the p elements) and simultaneously output the value (how many times) into a span element that this function creates.
The intended result is this: enter image description here
This is my html:
<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">Search</button>
</div>
</body>
And this is my js function:
function count_search(event){
let span = document.createElement('span');
span.setAttribute("id", "output");
document.body.appendChild(span);
var searchPhrase = document.querySelector("#searchtext").value;
var main = document.querySelector("#main");
var mainParas = main.querySelectorAll(" p ").textContent;
document.getElementById("#output").innerHTML =
(mainParas.match(/searchPhrase/g)).length;
/*var times = (mainParas.match(/searchPhrase/g) || []).length;
var content = "Searched for the word '" + searchPhrase + "' for " + times + "
times. ";
document.getElementById("output").innerHTML = content; */
}
However, the result just won't show. Can you please help me? Any suggestion is much appreciated!
<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>
<script>
function count_search(event){
span = document.createElement('span');
span.setAttribute("id", "output");
document.body.appendChild(span);
var searchPhrase = document.querySelector("#searchtext").value;
searchPhrase = new RegExp(searchPhrase, 'g');
var main = document.querySelector("#main");
let count = 0;
var mainParas = main.querySelectorAll("p").forEach(ele => {
const times = ele.innerHTML.match(searchPhrase);
count += times ? times.length : 0;
});
span.innerHTML = count;
}
</script>
</body>So the reason it was not showing up before is cause there was no onclick event associated with the button. The following code should help in a way.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments