Question

我已经尝试了谷歌的答案，其他人看了我的工作，但我们无法理解这里有什么问题......？我的HTML显示正确，但我的Javascript没有运行？我是Javascript的新手，所以请简单解释一下！我的Javascript与HTML不同。

＆＃13;

var name;

document.getElementById("changeName").onclick = newName;

function newName() {
  name = prompt("What is your name?");
  updateName();
}

function updateName() {
  document.getElementById("myName").innerHTML = name;
}

var item1;
var item2;
var item3;

document.getElementById("changeList").onclick = newList;

function newList() {
  item1 = prompt("Enter a new first thing: ");
  item2 = prompt("Enter a new second thing: ");
  item3 = prompt("Enter a new third thing: ");
  updateList();
}

function updateList() {
  document.getElementById("firstThing").innerHTML = item1;
  document.getElementById("secondThing").innerHTML = item2;
  document.getElementById("thirdThing").innerHTML = item3;
}

＆＃13;

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Things I Like</title>
    <style type="text/javascript" src="JS/javascript.js"></style>
  </head>
  <body>
    <h1 id="myName">Elizabeth</h1>
    <button id="changeName" type="button">Add Your Name</button>
    <hr>
    <p id="aboutMe">I'm learning to build dynamic pages with JavaScript and HTML!</p>
    <hr>
    <h1>Things I Like</h1>
    <p>Here are some of the things I like to do:</p>
    <ol>
      <li id="firstThing">Write JavaScript</li>
      <li id="secondThing">Travel the world</li>
      <li id="thirdThing">See my friends</li>
    </ol>
    <button id="changeList" type="button">Change Your List</button>
  </body>
</html>

＆＃13;

Answer 1

JavaScript不会出现在“样式表”中。它包含在脚本文件中。

此：

<style type="text/javascript" src="JS/javascript.js"></style>

错了。相反，你想要这个：

<script src="JS/javascript.js"></script>

Answer 2

你的代码有效，但javascript不是样式表，那就是CSS。

改变这个：

    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-context</artifactId>
        <version>3.2.1.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc-portlet</artifactId>
        <version>3.2.1.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-web</artifactId>
        <version>3.2.1.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>joda-time</groupId>
        <artifactId>joda-time</artifactId>
        <version>2.9.3</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.datatype</groupId>
        <artifactId>jackson-datatype-joda</artifactId>
        <version>2.7.4</version>
    </dependency>

有了这个：

 <style type="text/javascript" src="JS/javascript.js"></style>

它有效。

Answer 3

修复<style> / <script>错误后...

自上而下加载网页。那么你的JavaScript首先被加载并运行会发生什么。在JavaScript的第二行，您尝试获取HTML元素。

问题是HTML元素尚不存在，因为Web浏览器尚未加载/呈现HTML。

这不起作用：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Things I Like</title>
        <script>
            var dingo = document.getElementById("dingo")
            // this will not work because the HTML hasn't finished loading and rendering so the DIV doesn't exist yet
        </script>
    </head>
    <body>
        <div id="dingo">ate my baby</div>
    </body>
</html>

这将有效：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Things I Like</title>
    </head>
    <body>
        <div id="dingo">ate my baby</div>
        <script>
            var dingo = document.getElementById("dingo")
            // this will work
        </script>
    </body>
</html>

为什么我的Javascript没有运行？

3 个答案: