Javascript追加Textarea值問題

我創建了四個textarea框，我希望在點擊提交按鈕時獲取它們的值。當我點擊提交按鈕時，我想追加文本，它是在提交按鈕之後的textareas中以純文本形式寫入的。我試圖createElement("p")並追加值，但它不起作用。這是我迄今爲止所做的。任何人都可以幫助我找到問題所在？Javascript追加Textarea值問題

謝謝。

HTML代碼：

<div class="container"> 

    <div class="content-container"> 
    <label>First Content<label> 
     <textarea id="fisrt-content" class="content-area" placeholder="Insert Content Here"></textarea> 
     </div> 

     <div class="content-container"> 
     <label>Second Content<label> 
     <textarea id="second-content" class="content-area" placeholder="Insert Content Here"></textarea> 
     </div> 

     <div class="content-container"> 
     <label>Third Content<label> 
     <textarea id="third-content" class="content-area" placeholder="Insert Content Here"></textarea> 
     </div> 

     <div class="content-container"> 
     <label>Fourth Content<label> 
     <textarea id="fourth-content" class="content-area" placeholder="Insert Content Here"></textarea> 
     </div> 


     <button id="c-btn">Submit</button> 

     <div id ="c-content"></div> 

</div>

JavaScript代碼：

var firstContent = document.getElementById("first-content"); 
var secondContent = document.getElementById("second-content"); 
var thirdContent = document.getElementById("third-content"); 
var fourthContent = document.getElementById("fourth-content"); 
var customContainer = document.getElementById("c-content"); 
var submitBtn = document.getElementById("c-btn"); 


function submitCustomForm() { 

    var cElementOne = document.createElement("p"); 
cElementOne = firstContent.value; 
customContainer.append(cElementOne); 

    var cElementTwo = document.createElement("p"); 
cElementTwo = secondContent.value; 
customContainer.append(cElementTwo); 

    var cElementThree = document.createElement("p"); 
cElementThree = thirdContent.value; 
customContainer.append(cElementThree); 

    var cElementFour = document.createElement("p"); 
cElementFour = fourthContent.value; 
customContainer.append(cElementFour); 
} 

submitBtn.addEventListener("click", submitCustomForm);

來源

2016-11-13 NoName84

您的HTML一個錯字：ID = 「最前一頁內容」。此外，在回答表明，不重寫瓦爾：https://jsfiddle.net/ozmw0pgd/ – sinisake

cElementOne = firstContent.value; - 這個重寫你的變量

試試這個代碼

var cElementOne = document.createElement("p"); 
cElementOne.innerText = firstContent.value; 
customContainer.appendChild(cElementOne);

來源

2016-11-13 10:03:37 br3t

謝謝您的回答。我也嘗試過，但它不工作。 – NoName84

你也有：「最前一頁內容」作爲textarea的ID和'的getElementById（「第一內容」）' – br3t

全部工作示例https://jsfiddle.net/br3t/60dbobd9/ – br3t

的ID，當第一文本根據您的JavaScript代碼，rea是不正確的。

--Incorrect一個最前一頁內容

textarea id="**fisrt**-content" class="content-area" placeholder="Insert Content Here"></textarea>

--Correct ID的第一內容 <textarea id="first-content" class="content-area" placeholder="Insert Content Here"></textarea>

享受

下面是爲我工作正確的代碼，也使確定先在谷歌瀏覽器上運行它，然後在其他瀏覽器中嘗試，如addeventlister不支持Internet Explorer ER：

HTML

` <div class="content-container"> 
    <label>First Content<label> 
     <textarea id="first-content" class="content-area" placeholder="Insert 
     Content Here"></textarea> 
     </div> 

     <div class="content-container"> 
     <label>Second Content<label> 
     <textarea id="second-content" class="content-area" placeholder="Insert 
     Content Here"></textarea> 
     </div> 

     <div class="content-container"> 
     <label>Third Content<label> 
     <textarea id="third-content" class="content-area" placeholder="Insert 
     Content Here"></textarea> 
     </div> 

     <div class="content-container"> 
     <label>Fourth Content<label> 
     <textarea id="fourth-content" class="content-area"  
    placeholder="Insert  Content Here"></textarea> 
     </div> 


     <button id="c-btn" name="c-btn">Submit</button> 

     <div id ="c-content"></div> 

    </div>` 


`<script type="text/javascript"> 
var firstContent = document.getElementById("first-content"); 
var secondContent = document.getElementById("second-content"); 
var thirdContent = document.getElementById("third-content"); 
var fourthContent = document.getElementById("fourth-content"); 
var customContainer = document.getElementById("c-content"); 
    var submitBtn = document.getElementById("c-btn"); 


    function submitCustomForm() { 

    var cElementOne = document.createElement("p"); 
    cElementOne = firstContent.value; 
    customContainer.append(cElementOne); 

    var cElementTwo = document.createElement("p"); 
    cElementTwo = firstContent.value; 
    customContainer.append(cElementTwo); 

    var cElementThree = document.createElement("p"); 
    cElementThree = firstContent.value; 
    customContainer.append(cElementThree); 

    var cElementFour = document.createElement("p"); 
    cElementFour = firstContent.value; 
    customContainer.append(cElementFour); 
    } 

    submitBtn.addEventListener("click", submitCustomForm); 
    </script>`

薩迪普帕特爾

來源

2016-11-13 10:33:51

Javascript追加Textarea值問題

回答

相關問題