我的JavaScript遇到問題

Question

我正在嘗試設置網站的一部分，以便當您在輸入中輸入某些信息並單擊一個按鈕時，它會更改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;"><!--&#091;x_button shape="rounded" size="small" float="none" title="nextButton" info="none" info_place="top" info_trigger="hover" id="myButtonYo"&#093;Next&#091;/x_button&#093;-->    <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");
}
}

http://codepen.io/anon/pen/YyvaRy

Answer 1

這是更新的代碼。

 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;"> <!--&#091;x_button shape="rounded" size="small" float="none" title="nextButton" info="none" info_place="top" info_trigger="hover" id="myButtonYo"&#093;Next&#091;/x_button&#093;--> <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>