我试图设置网站的一部分,以便当您在输入中输入某些信息并单击按钮时,它会更改div中的文本。在此之后我想提交信息作为表格,但我知道如何做到这一点,那部分应该没问题。
HTML;
<div class="inner">
<div class="myDiv"><input placeholder="Exam name" type="text" id="myString" name="Title"></div>
<p><input type="radio" id="lc" name="Level" value"lc"=""> Option 1<br>
<input type="radio" name="Level" value"jc"="" id="jc"> Option 2 </p>
<div style="text-align:center;padding-top:10px;"><!--[x_button shape="rounded" size="small" float="none" title="nextButton" info="none" info_place="top" info_trigger="hover" id="myButtonYo"]Next[/x_button]--> <button id="myButton">Button</button></div>
</div>
<div class="inner">
<span id="mySpan"><em>When you select an exam title, your subjects will appear here</em></span>
</div>
<div class="inner">
<span id="myOtherSpan"><em>When you select a subject, your topics will appear here</em></span>
</div>
CSS;
.inner {
padding: 10px 15px;
border-top: 1px solid #ddd;
border-top: 1px solid rgba(0,0,0,0.15);
background-color: #fff;
box-shadow: none;
}
#myString {
display: block;
margin : 0 auto;
width:125px;
}
.myDiv {
padding: 0px 0px 10px 0px;
}
.myButton {
padding:100px 0px 0px 0px;
}
的Javascript;
document.getElementById('myButtonYo').onclick = function () {
//set var equal to exam name
var mystring = document.getElementById('myString').value;
//if lc check and exam name isn't empty
if(document.getElementById('lc').checked && mystring.trim().length() > 0) {
var lcsubjectText = "test";
document.getElementById('mySpan').innerHTML = lcsubjectText;
}
//if jc check and exam name isn't empty
else if (document.getElementById('jc').checked && mystring.trim().length() > 0){
var jcsubjectText = "test";
document.getElementById('mySpan').innerHTML = jcsubjectText;
}
//if exam name is empty
else if (mystring.trim().length() == 0){
alert ("Please enter an exam name");
}
else {
alert ("Please choose either Option 1 or Option 2");
}
}
答案 0 :(得分:0)
这是更新的代码。
document.getElementById('myButton').onclick = function() {
//set var equal to exam name
var mystring = document.getElementById('myString').value;
//if lc check and exam name isn't empty
if (document.getElementById('lc').checked && mystring.trim().length > 0) {
var lcsubjectText = "test";
document.getElementById('mySpan').innerHTML = lcsubjectText;
}
//if jc check and exam name isn't empty
else if (document.getElementById('jc').checked && mystring.trim().length > 0) {
var jcsubjectText = "test";
document.getElementById('mySpan').innerHTML = jcsubjectText;
}
//if exam name is empty
else if (mystring.trim().length == 0) {
alert("Please enter an exam name");
} else {
alert("Please choose either Option 1 or Option 2");
}
}
.inner {
padding: 10px 15px;
border-top: 1px solid #ddd;
border-top: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
box-shadow: none;
}
#myString {
display: block;
margin: 0 auto;
width: 125px;
}
.myDiv {
padding: 0px 0px 10px 0px;
}
.myButton {
padding: 100px 0px 0px 0px;
}
<div class="inner">
<div class="myDiv">
<input placeholder="Exam name" type="text" id="myString" name="Title">
</div>
<p>
<input type="radio" id="lc" name="Level" value "lc"="">Option 1
<br>
<input type="radio" name="Level" value "jc"="" id="jc">Option 2</p>
<div style="text-align:center;padding-top:10px;">
<!--[x_button shape="rounded" size="small" float="none" title="nextButton" info="none" info_place="top" info_trigger="hover" id="myButtonYo"]Next[/x_button]-->
<button id="myButton">Button</button>
</div>
</div>
<div class="inner">
<span id="mySpan"><em>When you select an exam title, your subjects will appear here</em></span>
</div>
<div class="inner">
<span id="myOtherSpan"><em>When you select a subject, your topics will appear here</em></span>
</div>