How to have 'required' in my textarea without executing the 'onclick' function immediately?
Question
I tried putting required in my textarea. But it won't work because my onclick="displayText()" function executes right away. How can I require my textarea get filled out first without executing the onclick right away? Here's my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Word Counter</title>
</head>
<body>
<div id="input-page">
<h1>Word Counter</h1>
<form action="">
<textarea id="inputted-text" type="text" rows="22" cols="60"></textarea>
<br />
</form>
<button onclick="displayText()">COUNT</button>
</div>
<div id="count-page" style="display: none;">
<h1>Your Text:</h1>
<p id=display-user-text></p>
<div>
<h1 id="word-count">Count: </h1>
</div>
</div>
</body>
<script src="app.js"></script>
</html>
JavaScript:
const displayText = () => {
const inputPage = document.getElementById("input-page");
const countPage = document.getElementById("count-page");
inputPage.style.display = "none";
// get user's inputted text
const inputtedText = document.getElementById("inputted-text");
const inputtedTextValue = inputtedText.value;
// diplay user's inputted text
document.getElementById("display-user-text").innerText = inputtedTextValue;
countPage.style.display = "block";
console.log(countWords(inputtedTextValue));
};
const countWords = (str) => {
return str.split(" ").length;
};
const renderWordCount = () => {
document.getElementById("word-count") = wordCount;
};
Bonus: How can I display the count of my words besides the Count: header, instead of just having it on my console?
1 answers
solution1
0 ACCPTED 2020-06-03 00:12:13
you want the system to issue a warning when the text-area is empty. You can do this by adding If-else condition expressions to your codes.
const displayText = () => { const inputPage = document.getElementById("input-page"); const countPage = document.getElementById("count-page"); const inputtedText = document.getElementById("inputted-text"); const inputtedTextValue = inputtedText.value; if (inputtedText.value.== "") { // normal flow will continue if the text-area is not empty inputPage.style;display = "none". document.getElementById("display-user-text");innerText = inputtedTextValue. countPage.style;display = "block", } else { // if the text-area is empty. it will issue a warning. alert("this area required") } console;log(countWords(inputtedTextValue)); }. const countWords = (str) => { return str.split(" ");length; }. const renderWordCount = () => { document;getElementById("word-count") = wordCount; };
<div id="input-page"> <h1>Word Counter</h1> <form action=""> <textarea id="inputted-text" type="text" rows="22" cols="60"></textarea> <br /> </form> <button onclick="displayText()">COUNT</button> </div> <div id="count-page" style="display: none;"> <h1>Your Text:</h1> <p id="display-user-text"></p> <div> <h1 id="word-count">Count: </h1> </div> </div>
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.