创建具有输入值的对象并将其添加到现有的JavaScript JavaScript数组

时间：2018-07-18 12:40:38

标签： javascript html css

我正在学习JavaScript课程，我必须创建一个JavaScript链接列表，方法是使用JS创建HTML元素，添加样式以及使用JS插入表单，以便允许用户插入列表上的新链接。

问题在于，我无法使函数正常工作，无法在现有数组中插入新对象（采用输入值形式）并显示使用新链接更新的列表。

任何对此的帮助将不胜感激！并认为我是初学者

var listeLiens = [{
    titre: "So Foot",
    url: "http://sofoot.com",
    auteur: "yann.usaille"
  },
  {
    titre: "Guide d'autodéfense numérique",
    url: "http://guide.boum.org",
    auteur: "paulochon"
  },
  {
    titre: "L'encyclopédie en ligne Wikipedia",
    url: "http://Wikipedia.org",
    auteur: "annie.zette"
  },
];

var dlElt = document.createElement("dl");

listeLiens.forEach(function(mot) {

  var dtElt = document.createElement("dt");

  var titreElt = document.createElement("a");
  titreElt.textContent = mot.titre;
  titreElt.href = mot.url;

  var urlElt = document.createElement("span");
  urlElt.textContent = mot.url;


  var auteurElt = document.createElement("p");
  auteurElt.textContent = "Ajouté par " + mot.auteur;

  //STYLES 
  dtElt.style.marginBottom = "10px";
  dtElt.style.backgroundColor = "#fff";
  dtElt.style.padding = "15px";

  titreElt.style.color = "#428bca";
  titreElt.style.fontSize = "22px";
  titreElt.style.textDecoration = "none";
  titreElt.style.fontWeight = "bold";

  urlElt.style.marginLeft = "6px";
  urlElt.style.fontSize = "16px";

  auteurElt.style.paddingTop = "5px";
  auteurElt.style.margin = "0px";

  dlElt.appendChild(dtElt);
  dtElt.appendChild(titreElt);
  dtElt.appendChild(urlElt);
  dtElt.appendChild(auteurElt);

});

//form and add new links function 

var zoneForm = document.createElement("div");

var boutonElt = document.createElement("button");
boutonElt.textContent = "Ajouter un lien";
boutonElt.style.borderRadius = "5px";
boutonElt.style.padding = "3px";

var form = document.createElement("form");
form.id = "nouveauLien";
form.style.width = "100%";

var auteur = document.createElement("input");
auteur.placeholder = "Enter link name";
auteur.id = "auteur";
auteur.setAttribute('type', "text");
auteur.setAttribute('name', "auteur");

var titre = document.createElement("input");
titre.placeholder = "Enter title name";
titre.style.marginLeft = "40px";
titre.style.width = "18%";
titre.id = "titre";
titre.setAttribute('type', "text");
titre.setAttribute('name', "titre");

var url = document.createElement("input");
url.placeholder = "Enter link address";
url.style.marginLeft = "40px";
url.style.width = "23%";
url.setAttribute('type', "text");
url.setAttribute('name', "url");

var boutonValider = document.createElement("input");
boutonValider.style.marginLeft = "40px";
boutonValider.style.borderRadius = "5px";
boutonValider.style.width = "7%";
boutonValider.style.padding = "3px";
boutonValider.setAttribute('type', "submit");
boutonValider.setAttribute('value', "Ajouter");


form.appendChild(auteur);
form.appendChild(titre);
form.appendChild(url);
form.appendChild(boutonValider);
zoneForm.appendChild(boutonElt);

boutonElt.addEventListener("click", function() {
  if (boutonElt) {
    boutonElt.style.display = 'none';
    form.style.display = 'inline-block';
    zoneForm.appendChild(form);
  } else {
    document.getElementById("nouveauLien").style.display = "none";
  }
});

boutonValider.addEventListener("click", function() {
  var message = document.createElement("p");
  message.textContent = "link already added! ";
  var message2 = "Try again";

  var newObject = {
    titre: document.getElementsByName('titre').value,
    url: document.getElementsByName('url').value,
    auteur: document.getElementsByName('auteur').value
  };
  listeLiens.push(newObject);


  if (boutonValider) {
    boutonElt.style.display = 'none';
    document.getElementById("nouveauLien").style.display = "none";
    return message;
  } else {
    return message2;
  }

});


document.getElementById("contenu").appendChild(zoneForm);

document.getElementById("contenu").appendChild(dlElt);
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #eee;
  margin-left: 30px;
  margin-right: 30px;
}

span {
  font-weight: normal;
  font-size: 80%;
}

.lien {
  background: white;
  padding: 10px;
  margin-bottom: 10px;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../css/liensweb.css">
  <title>Activity 2</title>
</head>

<body>
  <h1>Activity 2</h1>

  <!-- New elements into this tag -->
  <div id="contenu">
  </div>

  <script src="../js/liensweb.js"></script>
</body>

</html>

非常感谢您！

1 个答案:

答案 0 :(得分：1)

我已经纠正了您代码中的几个错误，以下是有效代码，

  

 var listeLiens = [{
    titre: "So Foot",
    url: "http://sofoot.com",
    auteur: "yann.usaille"
  },
  {
    titre: "Guide d'autodéfense numérique",
    url: "http://guide.boum.org",
    auteur: "paulochon"
  },
  {
    titre: "L'encyclopédie en ligne Wikipedia",
    url: "http://Wikipedia.org",
    auteur: "annie.zette"
  },

];


var dlElt = document.createElement("dl");

listeLiens.forEach(function(mot) {
   appendObjToList(mot);
});

function appendObjToList(mot) {
  var dtElt = document.createElement("dt");

  var titreElt = document.createElement("a");
  titreElt.textContent = mot.titre;
  titreElt.href = mot.url;

  var urlElt = document.createElement("span");
  urlElt.textContent = mot.url;


  var auteurElt = document.createElement("p");
  auteurElt.textContent = "Ajouté par " + mot.auteur;

  //STYLES 
  dtElt.style.marginBottom = "10px";
  dtElt.style.backgroundColor = "#fff";
  dtElt.style.padding = "15px";

  titreElt.style.color = "#428bca";
  titreElt.style.fontSize = "22px";
  titreElt.style.textDecoration = "none";
  titreElt.style.fontWeight = "bold";

  urlElt.style.marginLeft = "6px";
  urlElt.style.fontSize = "16px";

  auteurElt.style.paddingTop = "5px";
  auteurElt.style.margin = "0px";

  dlElt.appendChild(dtElt);
  dtElt.appendChild(titreElt);
  dtElt.appendChild(urlElt);
  dtElt.appendChild(auteurElt);
}

//form and add new links function 

var zoneForm = document.createElement("div");

var boutonElt = document.createElement("button");
boutonElt.textContent = "Ajouter un lien";
boutonElt.style.borderRadius = "5px";
boutonElt.style.padding = "3px";

var form = document.createElement("form");
form.id = "nouveauLien";
form.style.width = "100%";

var auteur = document.createElement("input");
auteur.placeholder = "Enter link name";
auteur.id = "auteur";
auteur.setAttribute('type', "text");
auteur.setAttribute('name', "auteur");

var titre = document.createElement("input");
titre.placeholder = "Enter title name";
titre.style.marginLeft = "40px";
titre.style.width = "18%";
titre.id = "titre";
titre.setAttribute('type', "text");
titre.setAttribute('name', "titre");

var url = document.createElement("input");
url.placeholder = "Enter link address";
url.style.marginLeft = "40px";
url.style.width = "23%";
url.setAttribute('type', "text");
url.setAttribute('name', "url");

var boutonValider = document.createElement("input");
boutonValider.style.marginLeft = "40px";
boutonValider.style.borderRadius = "5px";
boutonValider.style.width = "7%";
boutonValider.style.padding = "3px";
boutonValider.setAttribute('type', "button");
boutonValider.setAttribute('value', "Ajouter");


form.appendChild(auteur);
form.appendChild(titre);
form.appendChild(url);
form.appendChild(boutonValider);
zoneForm.appendChild(boutonElt);

boutonElt.addEventListener("click", function() {
  if (boutonElt) {
    boutonElt.style.display = 'none';
    form.style.display = 'inline-block';
    zoneForm.appendChild(form);
  } else {
    document.getElementById("nouveauLien").style.display = "none";
  }
});

boutonValider.addEventListener("click", function() {
  var message = document.createElement("p");
  message.textContent = "link already added! ";
  var message2 = "Try again";

  var newObject = {
    titre: document.getElementById('titre').value,
    url: document.getElementsByName('url')[0].value,
    auteur: document.getElementById('auteur').value
  };
  listeLiens.push(newObject);
  appendObjToList(newObject);

  if (boutonValider) {
    form.style.display = 'none';
    boutonElt.style.display = 'block';
    document.getElementById("nouveauLien").style.display = "none";
    return message;
  } else {
    return message2;
  }

});


document.getElementById("contenu").appendChild(zoneForm);

document.getElementById("contenu").appendChild(dlElt);
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #eee;
  margin-left: 30px;
  margin-right: 30px;
}

span {
  font-weight: normal;
  font-size: 80%;
}

.lien {
  background: white;
  padding: 10px;
  margin-bottom: 10px;
}
<h1>Activity 2</h1>

  <!-- New elements into this tag -->
  <div id="contenu">
  </div>

关于为什么它不能更早地起作用，这是错误，

  1. 最初，在页面加载时，您在DOM中填充了3个列表对象，但是在用户添加了另外一个对象之后，并没有在DOM中对其进行更新，而是仅在列表对象中进行了更新。

  2. 该表单的显示/隐藏操作不正确。隐藏容器将隐藏其所有子容器，反之亦然。

  3. document.getElementById返回一个元素，而document.getElementsByName返回一个元素数组，您可以阅读文档以获取有关类似功能的更多信息。

  4. 您已将boutonValider设置为“提交”类型，这将尝试将表单发布为空url，并在每次单击该按钮时重新加载页面，如果您选择“重新处理javascript中的所有内容。

相关问题
最新问题