Question

我正在尝试将我在文本输入中输入的所有内容大写js上的cap函数正常工作我可以在控制台上看到但是innerhtml函数没有更改html文件

function clr() {
  document.getElementById("box").value = '';
}

function caps() {
  var str = document.getElementById("box").value;
  console.log(str);
  var res = str.toUpperCase();
  console.log(res);
  document.getElementById("box").innerHTML = res;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>UI</title>
  <link rel="stylesheet" href="css.css">
  <script src="myscript.js"></script>

  <body>
    <div id="magic">
      <input id="box">
      <p id="pp">
        <button onclick="clr()">Clear It</button>
        <button onclick="caps()">Capitalize</button>
      </p>
    </div>
  </body>

</html>

这里我可以看到大写功能在控制台上工作正常但在HTML文件中不起作用

Answer 1

input元素没有.innerHTML属性。他们有.value属性。

只有具有开始和结束标记的元素才能包含其中的任何HTML，因此只有<div>，<span>，<p>等元素才能使用{{1} }。

您在.innerHTML功能中正确访问了value。

＆＃13;

clr

＆＃13;

function clr() {
  document.getElementById("box").value = '';
}

function caps() {
  var str = document.getElementById("box").value;
  console.log(str);
  var res = str.toUpperCase();
  console.log(res);
  document.getElementById("box").value = res;
}

＆＃13;

Answer 2

对于<input type="text">，没有innerHTML，它们具有value属性（您实际在caps函数中使用它）。这应该有效：

＆＃13;

function clr() {
  document.getElementById("box").value = '';
}

function caps() {
  var str = document.getElementById("box").value;
  console.log(str);
  var res = str.toUpperCase();
  console.log(res);
  document.getElementById("box").value = res;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>UI</title>
  <link rel="stylesheet" href="css.css">
  <script src="myscript.js"></script>

  <body>
    <div id="magic">
      <input id="box">
      <p id="pp">
        <button onclick="clr()">Clear It</button>
        <button onclick="caps()">Capitalize</button>
      </p>
    </div>
  </body>

</html>

＆＃13;

javascript innerhtml没有回复

2 个答案: