Question

我认为我的JavaScript函数无法正常工作以输出名称。

<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>textbox.html</title>
<script type = "text/javascript">
//text box
function sayHi()
{
 var txtName = document.getElementByID("txtName") ;
 var txtOutput = document.getElementByID("txtOutput") ;
 var name = txtName.value ;
 txtOutput.value = "Hi there, " +  name +  "!" ;
}
//end HI
</script>
<link rel = "stylesheet"
  type= "text/css"
  href = "textBoxes.css" />
</head>
<body>
  <h1>Text Box Input and Output</h1>
<form action = "">
<fieldset>
    <label>Type your name</label>
    <input type = "text"
           id = "txtName" />
    <input type = "button"
           value = "click me"
             onclick = "sayHi ()" />
    <input type = "text"
           id = "txtOutput" />
  </fieldset>
 </form>
 </body>
</html>

/ *我在做什么错，因为一旦输入名称并单击“我”按钮，将不会提供任何输出。我真的认为我的功能设置不正确。 * /

Answer 1

它是 getElementById ，而不是 getElementByID 。最后一个 d 不应大写。

Answer 2

尝试document.getElementById，而不尝试document.getElementByID（无大写ID）

Answer 3

尝试一下。

    <!DOCTYPE html>
    <html lang = "en-US">
    <head>
    <meta charset = "UTF-8">
    <title>textbox.html</title>
    <script type = "text/javascript">
    //text box
    function sayHi()
    {
        var txtName     = document.getElementById("txtName") ;
        var txtOutput   = document.getElementById("txtOutput") ;
        var name        = txtName.value ;
        txtOutput.value = "Hi there, " +  name +  "!" ;
    }
    //end HI
    </script>
    <link rel = "stylesheet"
      type= "text/css"
      href = "textBoxes.css" />
    </head>
    <body>
      <h1>Text Box Input and Output</h1>
    <form action = "">
    <fieldset>
        <label>Type your name</label>
        <input type = "text"
               id = "txtName" />
        <input type = "button"
               value = "click me"
                 onclick = "sayHi()" />
        <input type = "text"
               id = "txtOutput" />
      </fieldset>
     </form>
     </body>
    </html>

Answer 4

以下是一些更正：

该getElementByID应该是getElementById。
您也可以使用oninput代替onclick，但是输入后就会立即显示。尝试卸下按钮；更快。
对于txtOutput，请尝试使用输出而不是输入，除非您想输入输出本身。

这是更正的版本：

<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>textbox.html</title>
<script type = "text/javascript">
//text box
function sayHi()
{
 var txtName = document.getElementById("txtName") ;
 var txtOutput = document.getElementById("txtOutput") ;
 var name = txtName.value ;
 txtOutput.value = "Hi there, " +  name +  "!" ;
}
//end HI
</script>
<link rel = "stylesheet"
  type= "text/css"
  href = "textBoxes.css" />
</head>
<body>
  <h1>Text Box Input and Output</h1>
<form action = "">
<fieldset>
    <label>Type your name</label>
    <input type = "text"
           id = "txtName"
           oninput = "sayHi()" />
    <output type = "text"
           id = "txtOutput" />
  </fieldset>
 </form>
 </body>
</html>

我有一个简单的JavaScript问题，需要输入名称/使用短语输出名称

4 个答案: