坚持了 3 周:txtOutput 不会显示 logicalid.value。返回未定义的错误。相对 link 生成器

Been stuck on this for 3 weeks : txtOutput won't display logicalid.value. Returning undefined error. Relative link generator

我用谷歌搜索了这个问题的废话,看了图书馆的书,也问了朋友,但一直没能弄明白。我是 javascript 的新手,所以请多多包涵。我正在调整一个吐出 "Hi, 'name' !"

的表格

对于使用用户输入吐出亲戚 link 的人。在这种情况下,它是一个逻辑 id。所以用户将输入他们的逻辑 ID,生成器吐出一个 link,看起来像这样:

<a href="#" bcmltype="link" logicalid="'logical id entered by user'">

但是我的一直返回 'undefined',这似乎意味着它不接受用户输入作为值。

我已经将输入类型定义为数字,但完全不知道为什么它仍然未定义。

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "ASCII">
 <title>textBoxes.html</title>
 <script type = "text/javascript">
  // from textBoxes.html
  function sayHi(){
  var logicalid = document.getElementById("logicalid");
  var txtOutput = document.getElementById("txtOutput");
  var name = logicalid.value;
  txtOutput.value = "\x3ca href\x3d\x22\x23\x22 bcmltype\x3d\x22link\x22         logicalid\x3d\x22" + logicalid.value + "\x22\x3e"
  } // end sayHi
 </script>
 <link rel = "stylesheet"
   type = "text/css"
   href = "textBoxes.css" />
 </head>
 <body>
 <h1>Relative link generator</h1>
 <form action = ">
  <fieldset>
  <label>Enter your logical id </label>
  <input type = "number"
    id = "logicalid" />
  <input type = "button"
    value = "click me"
    onclick = "sayHi()"/>
  <input type = "text"
    id = "txtOutput" />
  </fieldset>
 </form>
 </body>
</html>

如有任何帮助,我们将不胜感激!

您的代码是正确的,您只是在表单操作后遗漏了一个"

<form action = ">

应该是

<form action = "">

示例:https://jsfiddle.net/15n7pn8r/

您忘记"关闭<form>

action

function sayHi(){
  var logicalid = document.getElementById("logicalid");
  var txtOutput = document.getElementById("txtOutput");
  var name = logicalid.value;
  console.log(name);
  txtOutput.value = "\x3ca href\x3d\x22\x23\x22 bcmltype\x3d\x22link\x22logicalid\x3d\x22" + logicalid.value + "\x22\x3e"
}
<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "ASCII">
 <title>textBoxes.html</title>
 </head>
 <body>
 <h1>Relative link generator</h1>
 <form action = "">
  <fieldset>
  <label>Enter your logical id </label>
  <input type="number" id="logicalid" />
  <input type = "button"
    value = "click me"
    onclick = "sayHi()"/>
  <input type = "text"
    id = "txtOutput" />
  </fieldset>
 </form>
 </body>
</html>