javascript添加按钮与两个输入

-1

我试图用JavaScript编写而不使用jquery。它基本上有两个输入字段：作者和报价，并在点击应该被添加到页面。javascript添加按钮与两个输入

我还试图将它保存在页面上以防我离开页面。当我执行的方法添加的报价消失：

function radd() { 
 
    if((document.getElementById("q").value!="") && (document.getElementById("a").value!="")) { 
 
     $("#mid-wraper").append("<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>"); 
 
     document.getElementById("q").value=""; 
 
     document.getElementById("a").value=""; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="but" onClick="radd()">Add</button> 
 
    <label for="q">Add ur Quote!</label><input id="q" name="q" /> 
 
    <label for="a">The author name</label><input id="a" name="a" />

来源

2016-12-28 sim123

请格式化... –

另外，请提出这个问题，因为HTML/JS片断，这里本身嵌入在计算器 –

@ sim123我编辑了自己的问题，让其他程序员更好地理解你所要求的。 –

试试这个

function radd() 
{ 
    if((document.getElementById("q").value!="")&& (document.getElementById("a").value!="")) 
    document.getElementById("mid-wraper").innerHTML += "<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>"; 
    document.getElementById("q").value=""; 
    document.getElementById("a").value=""; 
}

来源

2016-12-28 09:59:40

小提示：看看+ =运营商 –

谢谢。但我想知道如何保存它 – sim123

你想要保存？ –

function add(){ 
//create a new elem 
var el=document.createElement("p"); 
//you can assign id, class , etc 
el.id="yourcustomid"; 
el.textContent="yourcontent"; 
//then add to the wrapper 
var wrapper=document.getElementById("mid-wrapper"); 
wrapper.appendChild(el); 
}

这段代码演示了如何创建一个新的段落，并将其添加到您的包装JS ......

来源

2016-12-28 09:52:46

你也可以做一些喜欢的东西这个;在我看来，这更容易。只需创建两个输入，但将其属性设置为隐藏。并使用JavaScript，删除“隐藏”属性。

<button id="but" onClick="radd()">Add</button> 
<input id="q" hidden="hidden" >Add ur Quote!</input> 
<input id="a" hidden="hidden">The author name</input>

JS部分：

function radd(){ 
    document.getElementById("q").removeAttribute("hidden"); 
    document.getElementById("a").removeAttribute("hidden"); 
}

来源

2016-12-28 10:00:39 default

javascript添加按钮与两个输入

回答

相关问题