Question

这是我的简单播放列表生成器的代码。但是javascript根本不起作用，好像它不在那里。我试图在没有任何本地主机的情况下在浏览器中正常运行代码。但我了解到，在没有本地主机的情况下运行javascript可能会导致问题，所以我试图在小提琴中运行，但它也没有在那里工作。

任何帮助都会受到高度重视。感谢。

<script type = "text/javascript" >
  window.onload = inti;

function init() {
  var button = document.getElementById("addButton");
  button.onclick = createPlaylist;
}

function createPlaylist() {
  var songText = document.getElementById("songTextInput");
  var songName = songText.value;
  var li = createElement("li");
  li.innerHTML = "songName";
  var ul = document.getElementById("playlist");
  ul.appendChild("li");
}

</script>

<body>
  <form>
    <input type="text" id="songTextInput" name="song" size="40" placeholder="song name">
    <input type="button" id="addButton" name="add" value="addSong">

    <ul class="playlist">

    </ul>
  </form>
</body>

Answer 1

这么多错误。你还懒得跑吗？大多数问题出现在JavaScript控制台中，或者在运行时在片段编辑器中的stackoverflow上显示

的问题：

不需要stackoveflow上的脚本标记（尽管你需要在堆栈溢出之外）
init而非inti
document.createElement而非createElement
songname不是"songname"
li不是"li"
您使用课程＆＃34;播放列表标记播放列表＆＃34;所以你想要document.querySelector(".playlist")而不是document.getElementById("playlist")

其他建议

您不需要type="text/javscript"，因为它是默认
您不需要window.onload只需将脚本标记放在最后并自己致电init。

请考虑从不使用getElementById并始终使用querySelector

querySelector采用CSS选择器。所以

document.querySelector("#foo")   // gets 1st element with id="foo"
document.querySelector(".foo")   // gets 1st element with class="foo"
document.querySelector("canvas") // get first canvas element

等......您可以获得much more creative with selectors

＆＃13;

function init() {
  var button = document.getElementById("addButton");
  button.onclick = createPlaylist;
}

function createPlaylist() {
  var songText = document.getElementById("songTextInput");
  var songName = songText.value;
  var li = document.createElement("li");
  li.innerHTML = songName;
  var ul = document.querySelector(".playlist");
  ul.appendChild(li);
}

init();

＆＃13;

  <form>
    <input type="text" id="songTextInput" name="song" size="40" placeholder="song name">
    <input type="button" id="addButton" name="add" value="addSong">

    <ul class="playlist">

    </ul>
  </form>

＆＃13;

Answer 2

您不必将<script></script>标记放在js文件中或堆栈代码段中的js区域中。它会自动检测为JavaScript代码。

然后您在window.onload=inti中输入错误，应该是init。

而不是<ul class，请使用<ul id，因为您在JavaScript中调用document.getElement**ById**。

但我了解到，在没有本地主机的情况下运行javascript会导致问题

完全不同意。

JavaScript是一种客户端前端语言，由浏览器在运行时编译。您不需要服务器/主机来运行JavaScript。即使在浏览器控制台（f12）中键入它也会运行。

控制台是自行识别错误的好地方。利用它。

window.onload = init;

function init() {
  var button = document.getElementById("addButton");
  button.onclick = createPlaylist;
}

function createPlaylist() {
  var songText = document.getElementById("songTextInput");
  var songName = songText.value;
  var li = document.createElement("li");
  li.innerHTML = "songName";
  var ul = document.getElementById("playlist");
  ul.appendChild("li");
}

<body>
  <form>
    <input type="text" id="songTextInput" name="song" size="40" placeholder="song name">
    <input type="button" id="addButton" name="add" value="addSong">

    <ul id="playlist">

    </ul>
  </form>
</body>

Answer 3

太多的错误。

我在这里解决：

＆＃13;

window.onload = init();

function init() {
  var button = document.getElementById("addButton");
  button.onclick = createPlaylist;
}

function createPlaylist() {
  var songText = document.getElementById("songTextInput");
  var songName = songText.value;
  var li = document.createElement("li");
  li.innerHTML = "songName";
  var ul = document.getElementById("playlist");
  ul.appendChild(li);
}

＆＃13;

<form>
  <input type="text" id="songTextInput" name="song" size="40" placeholder="song name">
  <input type="button" id="addButton" name="add" value="addSong">

  <ul id="playlist">

  </ul>
</form>

＆＃13;

第一：

init＃inti。

第二

ul.appendChild(li);

＃

ul.appendChild("li");

将""与String一起使用。调用变量时，请勿使用""。

越来越多。

Answer 4

你的代码有点乱，只是它。

请比较我在下面发布的内容，这应该清楚为什么代码没有运行。

   <script type = "text/javascript" >
  window.onload = init();

    function init() {
      var button = document.getElementById("addButton");
      button.onclick = createPlaylist;
}

    function createPlaylist() {
      var songText = document.getElementById("songTextInput");
      var songName = songText.value;
      var li = document.createElement("li");
      li.innerHTML = songName;
      var ul = document.getElementById("playlist");
      ul.appendChild(li);
      songText.value = '';
}
</script>

与上述帖子有关第3名：

 <body>
   <form>
       <input type="text" id="songTextInput" name="song" size="40" placeholder="song name">
       <input type="button" id="addButton" name="add" value="addSong">

       <ul id="playlist"> </ul>

  </form>


</body>

所以：

var ul = document.getElementById("playlist");

而不是：

<ul id="playlist"> </ul>

javascript不起作用，即使是小提琴，更不用说浏览器了

4 个答案: