Fiddle

Question

这是我的代码：

（HTML）

<html>
  <head>
    <title>Editable Paragraph</title>
  </head>
  <body>
    <label onclick="changeText(0);" class="edit-button"></label>
    <h1 id="h1">Editable Paragraph</h1>
    <br>
    <label onclick="changeText(1);" class="edit-button"></label>
    <p id="p1">Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! </p>
    <br>
    <label onclick="changeText(2);" class="edit-button"></label>
    <p id="p2">Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! </p>
  </body>

  <footer>
    <div id="newText">
      <input id="myNewText" type="text" name="myNewText"/>
    </div>
  </footer>
</html>

（CSS）

p {
  display:inline;
}

h1 {
  display:inline;
}

#newText {
  position:fixed;
  left:5px;
  right:auto;
  top:auto;
  bottom:5px;
  width:auto;
  height:auto;
  background-color:#cccccc;
}

.edit-button {
  display:inline-block;
  height:20px;
  width:20px;
  background-color:#cccccc;
}

.edit-button:hover {
  background-color:#ffffff;
}

（JS（不是jQuery））

/* Smart Tips

1. When adding / editing add <br> before new <label>.

*/

function changeText(var count){
  switch (count) {
    case 0:
      document.getElementById("h1").innerHTML = document.getElementById("myNewText").value;
      break;
    default:
      document.getElementById("p"+count).innerHTML = document.getElementById("myNewText").value;
  }
}

点击按钮后，什么也没发生我将尝试查看控制台。

Answer 1

这适合我的情况：

function changeText(count){
  switch (count) {
    case 0:
      document.getElementById("h1").innerHTML = document.getElementById("myNewText").value;
      break;
    default:
      document.getElementById("p"+count).innerHTML = document.getElementById("myNewText").value;
  }
}

HTML - 可编辑的段落

1 个答案:

Fiddle