html - Having trouble with my javascript -
i'm trying set part of website when enter information in input , click button, changes text in div. after want submit info form know how , part of should okay.
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 select exam title, subjects appear here</em></span> </div> <div class="inner"> <span id="myotherspan"><em>when select subject, topics 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 exam name var mystring = document.getelementbyid('mystring').value; //if lc check , 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 , 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 empty else if (mystring.trim().length() == 0){ alert ("please enter exam name"); } else { alert ("please choose either option 1 or option 2"); } }
here's updated code.
document.getelementbyid('mybutton').onclick = function() { //set var equal exam name var mystring = document.getelementbyid('mystring').value; //if lc check , 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 , 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 empty else if (mystring.trim().length == 0) { alert("please enter 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 select exam title, subjects appear here</em></span> </div> <div class="inner"> <span id="myotherspan"><em>when select subject, topics appear here</em></span> </div>
Comments
Post a Comment