从文本框输入后如何在javascript中存储字符串值

Question

这里是新的 javascript 程序员。我正在尝试创建一个接收用户文本输入的“目标管理器”网络应用程序

      return (
    <>
      <GlobalStyle />
      <StyledH1>Strengthen and stay on top of your goals</StyledH1>
      
      <input id = "text1" placeholder = "New Goal: "/>
  
      <button onclick= "fn1()" id = "btn1"> Set Goal </button>
     
      <script>
        function fn1 () {
        var str = document.getElementById("text1").value;
        alert("Value: " + str);
      }
      </script>
      
      {goals.map((goal) => (
        <Goal
          key={goal.id}
          goal={goal}
          updates={updates.filter(
            (update) => update.fields.goalid[0] === goal.id
          )}
        />
      ))}
    </>
  );
}

我尝试存储使用上述代码输入的值，但遇到了指向 var 的错误“解析错误：意外令牌”。此代码在我的 App.js 文件中的 return () 内。

当我尝试将我的 fn1() 放在 return() 之外时，代码编译，但随后我收到警告“'fn1' is defined but never used”并且代码无法工作，但没有更多var 的问题。

任何帮助将不胜感激！

Answer 1

你快到了。 javascript代码应该写在script标签中。

 <input id = "text1" placeholder = "New Goal: "/>
    
     <button onclick= "fn1()" id = "btn1"> Set Goal </button>
      
    <script>
      function fn1 () {
        var str = document.getElementById("text1").value;
        alert("Value: " + str);
      }
    </script>

Answer 2

基本问题是您试图在 app.js 文件中混合使用 html 和 javascript。请在下面找到如何分隔 javascript 和 html 的示例。

<!DOCTYPE html>
<html>
   <head>
      /* This is script and is not mixed with html
         it could also be referred to from a separate file e.g. app.js */
      <script>
         function fn1 () {
           var str = document.getElementById("text1").value;
           alert("Value: " + str);
         }
      </script>
   </head>
   /* This is html and is not mixed with javascript */
   <body>
      <input id = "text1" placeholder = "New Goal: "/>
      <button onclick= "fn1()" id = "btn1"> Set Goal </button>
   </body>
</html>