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值问题

回答

相关问题