Question

JavaScript代码无法读取我的输入，该输入是名称，应该输出说莫里斯是一个很好的名字。我认为他们是一个我在divOutput中缺少的语法错误。

程序应输入和输出名称“莫里斯是一个非常漂亮的人名称”

//text box
function sayHi() {
  var txtName = document.getElementById("txtName");
  var divOutput = document.getElementById("divOutput");
  var name = txtName.value;
  divOutput.innerHTML = "<em>" + name + "</em>";
  divOutput.innerHTML = "is a very nice name.";
}
//end HI

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Inner.html</title>
  <link rel="stylesheet" type="text/css" href="textBoxes.css" />
</head>

<body>
  <h1>Inner HTML </h1>
  <form action="">
    <fieldset>
      <label>Pleae type your name</label>
      <input type="text" id="txtName" />
      <button type="button" onclick="sayHi()">
         Click Me
        </button>
    </fieldset>
  </form>
  <div id="divOutput">
    Watch this space.
  </div>
</body>

</html>

Answer 1

divOutput.innerHTML将替换divOutput之前的所有内容，而是使用+=。

function sayHi() {
  var txtName = document.getElementById("txtName");
  var divOutput = document.getElementById("divOutput");
  var name = txtName.value;
  divOutput.innerHTML += "<em>" + name + "</em>";
  divOutput.innerHTML += " is a very nice name.";
}

<form action="">
  <fieldset>
    <label>Pleae type your name</label>
    <input type="text" id="txtName" />
    <button type="button" onclick="sayHi()">
                     Click Me
                    </button>
  </fieldset>
</form>
<div id="divOutput">
  Watch this space.
</div>
</body>

Answer 2

function sayHi()
 {
 var txtName = document.getElementById("txtName") ;
 var divOutput = document.getElementById("divOutput") ;
 var name = txtName.value;
 divOutput.innerHTML = "<em>" + name + "</em> ";
 divOutput.innerHTML += "is a very nice name."; 
}

或

function sayHi()
 {
 var txtName = document.getElementById("txtName") ;
 var divOutput = document.getElementById("divOutput") ;
 var name = txtName.value;
 divOutput.innerHTML = "<em>" + name + "</em> is a very nice name."; 
}

Answer 3

尝试一下，您正在覆盖html。试试这个

Ruby version 2.5.3-p105 (2018-10-18) [x64-mingw32]

Answer 4

看看这个代码块，我只是稍稍修改了您的尝试。

总之，您快到了！

请注意，为了获取元素的值，可以对从.value检索到的内容使用getElementById。

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Inner.html</title>
    <link rel="stylesheet" type="text/css" href="textBoxes.css" />
  </head>
  <body>
    <h1>Inner HTML</h1>
    <form>
      <fieldset>
        <label>Please type your name</label>
        <input type="text" id="txtName" />
        <button type="button" onclick="sayHi()">
          Click Me
        </button>
      </fieldset>
    </form>
    <div id="divOutput">
      Watch this space.
    </div>
    <script type="text/javascript">
      //text box
      function sayHi() {
        var txtName = document.getElementById("txtName");
        console.log(txtName.value); // <== use dot value to get the value.
        var divOutput = document.getElementById("divOutput");
        divOutput.innerHTML =
          "<em>" + txtName.value + "</em> is a very nice name.";
      }
      //end HI
    </script>
  </body>
</html>

JavaScript输入/输出

4 个答案: