JS appendChild将不会追加

时间：2019-12-26 18:18:45

标签： javascript html css

我有一个按钮，应该用输入，文本区域和一个按钮创建一个div，首先不起作用，但是当我再添加一个按钮时，它“解决”了这个问题，我真的不明白为什么。 其次，当我创建div时，提交按钮不起作用。

（我第一次使用html非动态创建元素，并且效果很好）

HTML:
<!DOCTYPE html>
<html lang="de"></html>
<html>
    <head>
<title>will-nicht-haben</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="is.css">

    </head>
    <header>Will-nicht-haben<br>


            <div id="post"></div></div></div>

        <div id="rechts">
            <input type="text" id="suche" name="name" placeholder="Suche"> <button type="button" class="btn2">Suchen!</button>
        </div>
    </header>
    <body>

<div id="glavni">
   <div id="searching">
    <ul>
        <li><a href="#home">Alle Anzeigen</a></li>
        <li><a href="#news">Bücher</a></li>
        <li><a href="#news">Kledung und Schuche</a></li>
        <li><a href="#contact">Technik</a></li>
        <li><a href="#about">Sport</a></li>
        <li><a href="#about">Jobs</a></li>
        <li><a href="#about">Sonstiges</a></li>
      </ul>

    Anezigen gefunden:

   </div>
<div id="dij"><div id="anzeige_erste">Alle Anzeigen:</div>
<br>
<div id="insert">
</div>
</div>

<div id="dij2">

    <button type="submit" id="btn3">+ Neue Anzeige aufgeben</button>
    <br> 

   <!--  <p>1. Anzeigendetails</p>
    <label for="name">Titel</label>
<input type="text" id="titel" name="name" placeholder="z.B. ESOP klausur lösungen" required><br>
 Wähle eine kurze und aussagekräftige Überschrift.<br><br>
 <p>2. Beschreibung</p>

    <textarea id="beschreibung" placeholder=" z.B. Marke, Modell, Abmessungen, Farben, Größe,
    Mängel/Defekte, falls vorhanden." maxlength="700" name="comment" rows="10" cols="40" required></textarea>
    <br>
    <button type="submit" id="btn">Neue Anzeige</button> -->


</div>
</div>
<script src="objekti.js"></script>
    </body>
</html>

CSS：

input:invalid {color:red;}
textarea:invalid {color:red;}
body{
  font-family: Arial Unicode MS,Arial,Helvetica,sans-serif;
  padding: 0;
  margin: 0;
}
header{
  font-family: Arial Unicode MS,Arial,Helvetica,sans-serif;
    width: 100%;
    border-top:1px solid black;
    border-left:1px solid black;
    border-right:1px solid black;
    border-bottom:1px solid black;
    top: 0;
    position: sticky;
    background-color: blanchedalmond;

}

#glavni{
display: grid;
grid-template-columns: 25% 50% 25%;
height:auto;
width: 85%;
border: 1px solid black;
border-top: 0px solid black;
grid-auto-columns: auto;
margin: auto;
background-color:blanchedalmond ;
}

#dij{
    border-right: 1px solid black; 

    padding-top: 10px;
    padding-bottom: 10px;
}

#dij2{
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 4px;
    background-color: rgb(248, 188, 218);
}

#anzeige{
/*borovina
hrastovina
jelovina */
padding-left: 5px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: greenyellow;
display: grid;
grid-template-columns: 25% 50% 25%;
height:100px;
margin-bottom: -19px; 
}

#first{

  background-color: red;

}

#second{
  height: 100%;
  width: 250px;
  padding-left: 10px;
}
#suche{
  width: 300px;

}

#user{
border-right: 1px solid black;
background-color: cadetblue;

}

#inneruser{
    border: 1px solid black;
    background-color: gainsboro;
    padding: 5px;
    margin: 5px;

}
#searching{

  background-color: rgb(189, 93, 93);
  border-right: 1px solid black;
}
textarea {
    caret-color: red;  
    width: 90%;
    height:100px;
    border: 1px solid #cccccc;
    padding: 0.5em;
  font-family: Tahoma, sans-serif;
  margin: 4px 2px;

}
textarea:focus {
      background: #FFC;
}
 body p{
      background-color: chartreuse;
  }
  #btn {
    background-color: chartreuse; /* Green */
    border: none;
    color: white;
    padding: 16px 32px; 
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px; 
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
  }
  #btn {
    background-color: white; 
    color: black; 
    border: 1px solid black;
  }

  #btn:hover {
    background-color: chartreuse;
  color: white;
  }

  #rechts{
  background-color: palegreen;
text-align: center;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
  }

  #anzeige_erste{

    padding-left: 15px;
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: yellowgreen;
    text-align: center;
    border:1px solid black;
  }

  ul {
    list-style-type: none;

    margin-top:15px;
    padding: 0;
    width: 50%;
    background-color: blanchedalmond;
  }

  li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;

  }

  /* Change the link color on hover */
  li a:hover {
    background-color: black;
    color: white;
  }

  ul {
    border: 1px solid black;
    border-left: 0px solid black;
  }

  li {
    text-align: center;
    border-bottom: 1px solid black;

  }

  li:last-child {
    border-bottom: none;
  }

  .btn2{
    background-color: gold; /* Blue background */
    border: none; /* Remove borders */
    color: black; /* White text */
    font-size: 16px; /* Set a font size */
    cursor: pointer; /* Mouse pointer on hover */
  }

  /* Darker background on mouse-over */
  .btn2:hover {
    background-color: goldenrod;
  }

  #btn3 {
    background-color: chartreuse; /* Green */
    border: none;
    color: white;
    padding: 16px 32px; 
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px; 
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
  }
  #btn3 {
    background-color: white; 
    color: black; 
    border: 1px solid black;
  }

  #btn3:hover {
    background-color: chartreuse;
  color: white;
  }

  #div1{
    border:1px solid black;
  }

JS：

var anzeigen=[
{titel:"Kuehlschrank",beschreibung:"Alter Kuehlschrank",ort:"Uni Klagenfurt",von:"01.05.",bis:"4.12"},
{titel:"Buch ES",beschreibung:"Stephen King ES",ort:"Uni Wien",von:"04.11"},
{titel:"Kopfkisen",beschreibung:"Neuer Kopfkisen",ort:"Uni Graz"},
{titel:"Auto",beschreibung:"Schrott",ort:"TU Graz"},
{titel:"Bilderalbum",beschreibung:"Neu",ort:"TU Wien"},
{titel:"Auto",beschreibung:"Bla bla",ort:"Uni Klagenfurt"},
{titel:"Auto",beschreibung:"Bla bla",ort:"Uni Klagenfurt"}
];

let input=document.getElementById("insert");

let innerString=function () {
    let count=1;
    var startStr="";
    for (let i=0;i<anzeigen.length;i++){

 startStr+="<div id=\"anzeige\">"+"<div id=\"first\">"+count+"</div>"+"<div id=\"second\">"+"<h3>"+anzeigen[i].titel+"</h3>"+anzeigen[i].beschreibung+" "+anzeigen[i].ort+"</div>"+"<div>"+"datum"+"</div>"+"</div>"+"<br>";
 count++;
    }
    input.innerHTML=startStr;
}
innerString();

let i=0;
document.getElementById("post").innerHTML="Anzeigen:";
var titel=document.getElementById("titel");
var beschreibung=document.getElementById("beschreibung")
document.getElementById("btn").addEventListener("click",()=>{
    if (titel.value!="" && beschreibung.value!=""){
    anzeigen.unshift({titel:titel.value,beschreibung:beschreibung.value,ort:"Test"});
    innerString();
    i++;

   document.getElementById("post").innerHTML="Anzeigen:"+""+i;
    }else(alert("Bitte alles ausfüllen!"));

});

var dij2=document.getElementById("dij2");

var btn3=document.getElementById("btn3");
btn3.addEventListener("click",()=>{
    var div=document.createElement("div");
    div.setAttribute("id","div1");

    var br=document.createElement("br");

    var p = document.createElement("p");
    var p_text=document.createTextNode("1. Anzeigendetails");
    p.appendChild(p_text);

    var label=document.createElement("label");
    label.setAttribute("for","name");
    var label_text=document.createTextNode("Titel: ");
    label.appendChild(label_text);

    var inputt=document.createElement("input");
    inputt.setAttribute("type","text");
    inputt.setAttribute("id","titel");
    inputt.setAttribute("name","name");
    inputt.setAttribute("placeholder","z.B. ESOP klausur lösungen");

    var p2= document.createElement("p");
    var p2_text=document.createTextNode("2. Beschreibung");
    p2.appendChild(p2_text);

    var textar=document.createElement("textarea");
    textar.setAttribute("id","beschreibung");
    textar.setAttribute("placeholder","z.B. Java ist auch eine Insel");
    textar.setAttribute("maxlength","50");

    var button=document.createElement("button");
    button.setAttribute("type","submit");
    button.setAttribute("id","btn");
    var button_text=document.createTextNode("Neue Anzeige");
    button.appendChild(button_text);

div.appendChild(br);
div.appendChild(p);
div.appendChild(label);
div.appendChild(inputt);
div.appendChild(p2);
div.appendChild(textar);
div.appendChild(br);
div.appendChild(button);

dij2.appendChild(div);

btn3.remove();
});

0 个答案:

没有答案
相关问题
最新问题