问如何在不立即执行'onclick‘函数的情况下，在我的textarea中拥有'required’？
EN

Stack Overflow用户

提问于 2020-06-02 23:56:27

回答 1查看 36关注 0票数 0

我试着把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:头之外，我如何显示我的单词数，而不只是把它放在我的控制台上呢？

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-03 00:12:13

您希望系统在文本区域为空时发出警告。您可以通过向代码中添加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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62163155

复制

相似问题

问如何在不立即执行'onclick‘函数的情况下，在我的textarea中拥有'required’？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不立即执行'onclick‘函数的情况下，在我的textarea中拥有'required’？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不立即执行'onclick‘函数的情况下，在我的textarea中拥有'required’？
EN