Question

http://jsfiddle.net/8hn5kgpw/156/ 这是JSfiddle上的链接，它工作正常。

下面是我为dreamveaver编写的代码，但它不起作用，似乎无法调用script.js文件。但不确定原因。

<!doctype html>
<html>
<head>
<title>lab1</title>
<script type= "text/javascript" src="script.js"></script>
</head>

<body>
First name:
<input type="text" id="newfruit">
<br>

<h1> Fruit Shelf:</h1>

<div id="div1">
    <ol id="fruits"></ol>
</div>

<h1>Basket:</h1>

<ol id="basket"></ol>
<input type='button' onclick='changeText2()' value='Submit' />
</body>
</html>

这是javascript文件

var list = document.getElementById('basket');
var fruitsshelf = document.getElementById("fruits");
var fruitslist = ["pear", "apple", "peach", "grapes", "strawberry", "melon"];
for (var j = 0; j < fruitslist.length; j++) {
    var newlist = document.createElement('li');
    newlist.id = 'listid'+j;
    newlist.appendChild(document.createTextNode(fruitslist[j]));
    fruitsshelf.appendChild(newlist);
}

function changeText2() {
    var newfruit = document.getElementById('newfruit').value;
    var entry = document.createElement('li');
    var len = fruitslist.length;
    for (var i = 0; i < len; i++) {
        if (fruitslist[i] == newfruit) {

            entry.appendChild(document.createTextNode(newfruit));
            list.appendChild(entry);
            document.getElementById("listid"+i).remove();
            delete fruitslist[i];
        }
    }

}

Answer 1

您需要将JavaScript放在页面的末尾或将其包装在窗口onload事件中（这是jsFiddle默认执行的操作）。你现在拥有它的方式，你正试图在尚不存在的元素上执行JavaScript。你的小提琴是在关闭的body元素之前加载代码，上面的例子不是。

将<script type= "text/javascript" src="script.js"></script>移至</body>之前。

我的代码适用于JSfiddle，但不适用于dreamveaver和浏览器？

1 个答案: