javascript - 我的 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>