我试着把我的文本区域放进去。但它不起作用，因为我的函数立即执行。我怎样才能要求先填写我的文本区域，而不立即执行点击？这是我的代码：requiredonclick="displayText()"网页：<!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>脚本：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;};奖励：除了标题之外，我还可以显示我的单词计数，而不仅仅是在我的控制台上显示它？Count:
1 回答
眼眸繁星
TA贡献1873条经验 获得超9个赞
您希望系统在文本区域为空时发出警告。您可以通过将 If-else 条件表达式添加到代码中来执行此操作。
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>
添加回答
举报
0/150
提交
取消