javascript - 如何在不立即执行“onclick”功能的情况下在我的文本区域中有“必需”?
问题描述
我试着把required
我的文本区域。但它不起作用,因为我的onclick="displayText()"
函数会立即执行。如何在不立即执行 onclick 的情况下要求先填写我的 textarea?这是我的代码:
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;
};
奖励:除了标题之外,我如何显示我的字数Count:
,而不仅仅是在我的控制台上显示?
解决方案
您希望系统在文本区域为空时发出警告。您可以通过在代码中添加 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>
推荐阅读
- php - 如何在遗留系统中测试 json-api 的排序
- oracle11g - PHP 5.2.0-8 上的 oci_connect 不适用于 Oracle 11g
- wagtail - 无法让联合查询在 Wagtail 中的不同模型中工作
- sql-server - 如何修复 SSIS 中缺少的 SQL 连接管理器
- r - 通过数据帧循环函数,区分,然后在原始数据帧中按列组合
- php - 遍历 JSON 请求的多个页面(Guzzle、Laravel、PHP)
- blazor - 当我在表单中选择另一个文本框时,羽毛笔编辑器的内容被清除
- python - 我的代码返回“命令 '['python3']' 2 秒后超时”
- c# - 就地更新 PDF 图像
- javascript - React Native:获取函数发送空主体