时间戳

首页 > 解决方案 > 我的构造函数有问题

javascript - 我的构造函数有问题

问题描述

嗨，我想在按下按钮时将文本从变量添加到 div。但我被卡住了。文本添加在底部或根本不添加。

    var text=['text1','text2','text3'];
    var title=['title1','title2','title3'];
    var i=0;
    $("#Construct").on("click",function()
        {
            newTitle = document.createElement("div");
            newTitle.innerHTML = title[i];
            newTitle.classList.add("title")
            newText = document.createElement("div");
            newText.innerHTML = text[i];
            newText.classList.add("text")
    
            insertplace = document.getElementById("#insert");
    
            document.body.insertBefore(newText, insertplace.nextSibling);
            document.body.insertBefore(newTitle, insertplace.nextSibling);
            
            i++;
      
        });
#example{
   background: lightblue;
   width: 400px;
}
.text { 
    color: black; 
    font-family: Verdana; 
    font-size: 16px; 
    text-align: left; 
}
.title { 
    color: black; 
    font-family: Verdana; 
    font-size: 28px; 
    text-align: right;
}
#created{
      background: green;
      width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input id="Construct" class="button" type="button" value="Construct" >
    <div id="example">
      <div class="title">
      Title
      </div>
      <div class="text">
      Text
      </div>
    </div>
    <br>
    <div id="created">
        <div id="insert"> </div>
    </div>

我也可以这样创建程序按钮吗？我想让他们在字符串变量中有文件路径的同时播放声音文件。

标签： javascriptjqueryhtmlconstructor

解决方案

.getElementById()意味着您将传递一个id，因此您不添加“#”。

此外，代替.insertBefore(),.appendChild()在插入区域使用。

纠正这些问题后，当您第 4 次单击按钮时，您仍然会遇到问题，因为您的数组只有 3 个项目，因此需要在增加变量之前检查变量。

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

var text=['text1','text2','text3'];
var title=['title1','title2','title3'];
var i=-1;  // Start before the first index

$("#Construct").on("click",function(){
   // Check to see if there is another item in the array
   if(i < text.length -1) {
     i++;
   } else {
     console.log("There are no more items to create elements from.");
     return; // exit the function
   }

   newTitle = document.createElement("div");
   newTitle.innerHTML = title[i];
   newTitle.classList.add("title")
   newText = document.createElement("div");
   newText.innerHTML = text[i];
   newText.classList.add("text")
    
   // With .getElementById(), you don't add "#"
   insertplace = document.getElementById("insert");
    
   insertPlace.appendChild(newText);
   insertPlace.appendChild(newTitle);
    

   
});
#example{
   background: lightblue;
   width: 400px;
}
.text { 
    color: black; 
    font-family: Verdana; 
    font-size: 16px; 
    text-align: left; 
}
.title { 
    color: black; 
    font-family: Verdana; 
    font-size: 28px; 
    text-align: right;
}
#created{
      background: green;
      width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input id="Construct" class="button" type="button" value="Construct" >
    <div id="example">
      <div class="title">Title</div>
      <div class="text">Text</div>
    </div>
    <br>
    <div id="created">
        <div id="insert"> </div>
    </div>

推荐阅读