Question

我正在尝试创建一个文本字段，在按下“go”按钮后立即显示输入。但是当我按下按钮时，它会清除所有元素。

HTML

<div id = "sideMenu">
  <ul>
    <li id="r">
      <span><img class="piece" src="vazirRed.png"></span>
      Red Player<input type="text" id="input" value="name">
      <button onclick="write();">go</button>
    </li>
    <li>
      <span><img class="piece" src="vazirBlue.png"></span>
      Blue Player<input type="text" value="name">
      <button onclick="write();">go</button>
    </li>
  </ul>
</div>

JS

function write(){
  var inputRed=document.getElementById("input");
  var redName = inputRed.value;
  var name = document.createElement("div");
  name.appendChild(redName);
  //document.getElementById("#r").innerHTML += redName;
}

The fiddle

Answer 1

您只是为您的功能使用write关键字。然后它调用document.write()，它将用空字符串替换所有内容。

用其他任何东西替换它：

function writeIt() {
    ...
}

<强> Update JSFiddle

附注：

使用document.getElementById("r")代替document.getElementById("#r")
选择＆＃34;不包装＆＃34;在你的小提琴中进行内联呼叫工作

Answer 2

您无法将功能命名为write()。

如果您致电onclick=write()，则会调用document.write()函数。所以你的DOM正在被清除。你没有得到任何东西。

重命名您的功能。

将此行添加到div

中添加body

document.body.appendChild(name);

Answer 3

您不能使用方法写入，因为write（）方法将HTML表达式或JavaScript代码写入文档。 DOC： http://www.w3schools.com/jsref/met_doc_write.asp

所以，请为您的方法更改为：

<div id = "sideMenu">
  <ul>
    <li id="r">
      <span><img class="piece" src="vazirRed.png"></span>
      Red Player<input type="text" id="input" value="name">
      <button onclick="submitInput();">go</button>
    </li>
    <li>
      <span><img class="piece" src="vazirBlue.png"></span>
      Blue Player<input type="text" value="name">
      <button onclick="submitInput();">go</button>
    </li>
  </ul>
</div>
<script>
function submitInput(){
  var inputRed =  document.getElementById("input");
  var redName = inputRed.value;
  var name = document.createElement("div");
  //name.appendChild(redName);
  document.getElementById("r").innerHTML += redName;
}
</script>

为什么html dom输入功能不起作用？

3 个答案: