Question

我正在做一个学校项目，试图列出你需要购买的东西。问题是，我不能写多次并添加到列表中，我无法弄清楚原因。（它远未完成。）（我必须使用不同的javascript文件）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<link href="main.css" type="text/css" rel="stylesheet">

<title>Inköpslista</title>

</head>

<body>
<div id="kol1" class="kol">
<h1>Inköp</h1>
<input type="image" src="img/button.png" alt="Submit" id="storknapp"         onclick="klickaKnapp('skriva')"/>
 <input type"text" id="skriva" placeholder="Skriv din vara här!"/>
 <input type="image" id="knapp" src="pluss.png" alt="Submit"/>


</div>

<div id="kol2">
<ul id="listaavvara"></ul>
</div>

<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>

</body>
</html>



function laggtill(cool, namnVara) {
var vara = document.createElement("li");
vara.innerText = namnVara;

cool.appendChild(vara);
}

var button = document.getElementById("knapp");
button.onclick = function() { 

    var skriva = document.getElementById("skriva")
    var namnVara = skriva.value;

    if(!namnVara|| namnVara =="" || namnVara == " " ){
        return false; 

    }

    laggtill(document.getElementById("listaavvara"), namnVara); 

};

javascrpit 2：

function klickaKnapp(x){
var skrivrutan = document.getElementById(x), maxH="100px";


if(skrivrutan.style.height == maxH){
    skrivrutan.style.height = "0px";

} else {
    skrivrutan.style.height = maxH;

}
}

你真的知道我的意思！（我的照片不在这里）

Answer 1

由于

var button = document.getElementById("knapp");
button.onclick = function() { ... }

覆盖内联事件处理程序。您需要使用addEventListener

附加活动

button.addEventListener("click", function(){...}, false);

Answer 2

你的例子适用于小提琴：http://jsfiddle.net/7zjb86ab/

所以这看起来导入的脚本有问题

<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>

这两个文件是否包含您的javascript片段？

您也可以尝试替换

var button = document.getElementById("knapp");
button.onclick = function() {

带

function addItem() {

然后将该函数添加为onclick属性，就像使用klickaKnapp函数

一样

<input type="image" id="knapp" src="pluss.png" alt="Submit" onclick="addItem()" />

Javascript / html，在输入中不能写两次

2 个答案: