Reputation: 31

Textarea won't display values after hitting Reset

The reset button only appears once a conversion from Fahrenheit to Celsius is successfully done. It works fine. However, after hitting Reset, I cannot see values in the textarea when perform more conversions. I think the problem is most likely caused the two arrays in my codes. What do you think?

I have recreated the problem here: http://jsfiddle.net/wnna3646/

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Temperature Conversion</title>

<style type="text/css">
 body { font: 1em calibri, arial; }
 button {
  background-color: transparent;
  margin: 5px;
  width: 300px;
 }
 h1, h2, h3, h4 { text-align: center; }
 table {
  border: 8px double;
  margin-left: auto;
  margin-right: auto;
  padding: 2px;
  height: 500px;
  width: 30%;
 }
 td { border: 1px solid; }
 td#topcell {
  height: 300px;
  text-align: center;
  vertical-align: middle;
 }
 td#midcell {
  height: 300px;
  text-align: center;
  vertical-align: middle;
 }
 td#bottomcell { text-align: center; }

 textarea {
    width: 250px;
    height: 250px;
 }
 p { 
    word-spacing: 25px;
 }

 #Fahr {
    display: inline-block;
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
 }

 #Cels {
    display: inline-block;
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
 }

 #ftemp, #ctemp {
    display: inline;
    float: middle;

 }


</style>

</head>
<body>
<main role="main">
<form id="myForm" onsubmit="return this.ftemp.value!=''">
<table>
 <tr>
  <td id="topcell">
   <label for="Fahrenheit" id="Fahr">Fahrenheit:</label><input id="ftemp" onkeypress="return fNumericCharactersOnly(event)" onkeyup="this.form.Convertbtn.disabled = this.value==''; this.form.Avgbtn.disabled = this.value==''; if(!validnum(this.value)) this.value=''">
   <br /><br />
   <label for="Celsius" id="Cels" >Celsius:</label><input id="ctemp" readonly>
   <br /><br /><br /><br /><br /><br />
   <p>Fahrenheit Celsius</p>                
  </td>
 </tr>
 <tr>
  <td id="midcell">
   <br />
   <textarea rows="5" id="txtArea" readonly></textarea>
  </td>
 </tr>
 <tr>
  <td id="bottomcell">
   <input type="button" id="Convertbtn" value="Convert" accesskey="c" onclick="convertTemp(); counter++" disabled="disabled"/>
   <input type="button" id="Avgbtn" value="Average" accesskey="a" onclick="averageTemp(); AddResetbutton()" disabled="disabled"/>
   <div id="ButtonSpot"></div>
  </td>
 </tr>
</table>
</form>
</main>

<script type="text/javascript">
var flist = [];
var clist = [];
var counter = 0; 

function validnum(F) {
    if(F < -9999 || F > 9999)
        return false;
    else
        return true;
}

function fNumericCharactersOnly(evt){
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;

    return (charCode >= 48 && charCode <= 57);  // 48 to 57 ==> 0 to 9
}   

function convertTemp() {
  var c = document.getElementById('ctemp'),
      f = document.getElementById('ftemp');
  c.value = parseFloat(Math.round((f.value - 32) * 5 / 9)).toFixed(2);


  tf = f.value, tc = c.value;

  flist.push(tf);  clist.push(tc);

  var str = "";
    str += '\t' + tf + '\t' + '&nbsp' + '&nbsp' + tc + "\n";
    document.getElementById("txtArea").innerHTML = str;


}

function averageTemp() {
    var content="";
    var sumF = 0;
    var sumC = 0;


    for (var i = 0; i < flist.length; i++) {
        content += '\t' + flist[i] + '\t' + '&nbsp' + '&nbsp' + clist[i] + "\n";
        sumF += parseInt(flist[i], 10);
        sumC += parseInt(clist[i], 10);
    }
    bars = '===============================';
    var avgF = parseFloat(sumF / flist.length).toFixed(2);
    var avgC = parseFloat(sumC / clist.length).toFixed(2);

    document.getElementById("txtArea").innerHTML = content + bars + "\n" + '\t' + avgF + '\t' + '&nbsp' + '&nbsp' + avgC;
    flist = [];
    clist = [];
    document.getElementById("Avgbtn").disabled=true;
}

function AddResetbutton() {
    document.getElementById('ButtonSpot').innerHTML = '<input type="button" onClick="removeButton();" value="Reset" />';
    document.getElementById("Convertbtn").disabled=true;
}


function removeButton() {
    document.getElementById("myForm").reset();
    document.getElementById('ButtonSpot').innerHTML = '';
    document.getElementById("txtArea").value = "";
    document.getElementById("Convertbtn").disabled=true;
    document.getElementById("Avgbtn").disabled=true;   
}


</script>

</body>
</html>

Also, I have attempted to make the script automatically display all values after the 10th one is entered, but can't seem to make it work. Any suggestions?

Upvotes: 0

Answers (1)

Bugfixer

Reputation: 2617

Hey Your code is fixed.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Temperature Conversion</title>

<style type="text/css">
 body { font: 1em calibri, arial; }
 button {
  background-color: transparent;
  margin: 5px;
  width: 300px;
 }
 h1, h2, h3, h4 { text-align: center; }
 table {
  border: 8px double;
  margin-left: auto;
  margin-right: auto;
  padding: 2px;
  height: 500px;
  width: 30%;
 }
 td { border: 1px solid; }
 td#topcell {
  height: 300px;
  text-align: center;
  vertical-align: middle;
 }
 td#midcell {
  height: 300px;
  text-align: center;
  vertical-align: middle;
 }
 td#bottomcell { text-align: center; }

 textarea {
    width: 250px;
    height: 250px;
 }
 p { 
    word-spacing: 25px;
 }

 #Fahr {
    display: inline-block;
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
 }

 #Cels {
    display: inline-block;
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
 }

 #ftemp, #ctemp {
    display: inline;
    float: middle;

 }


</style>

</head>
<body>
<main role="main">
<form id="myForm" onsubmit="return this.ftemp.value!=''">
<table>
 <tr>
  <td id="topcell">
   <label for="Fahrenheit" id="Fahr">Fahrenheit:</label><input id="ftemp" onkeypress="return fNumericCharactersOnly(event)" onkeyup="this.form.Convertbtn.disabled = this.value==''; this.form.Avgbtn.disabled = this.value==''; if(!validnum(this.value)) this.value=''">
   <br /><br />
   <label for="Celsius" id="Cels" >Celsius:</label><input id="ctemp" readonly>
   <br /><br /><br /><br /><br /><br />
   <p>Fahrenheit Celsius</p>                
  </td>
 </tr>
 <tr>
  <td id="midcell">
   <br />
   <textarea rows="5" id="txtArea" name="textarea-name" readonly></textarea>
  </td>
 </tr>
 <tr>
  <td id="bottomcell">
   <input type="button" id="Convertbtn" value="Convert" accesskey="c" onclick="convertTemp(); counter++" disabled="disabled"/>
   <input type="button" id="Avgbtn" value="Average" accesskey="a" onclick="averageTemp(); AddResetbutton()" disabled="disabled"/>
   <div id="ButtonSpot"></div>
  </td>
 </tr>
</table>
</form>
</main>

<script type="text/javascript">
var flist = [];
var clist = [];
var counter = 0; 

function validnum(F) {
    if(F < -9999 || F > 9999)
        return false;
    else
        return true;
}

function fNumericCharactersOnly(evt){
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;

    return (charCode >= 48 && charCode <= 57);  // 48 to 57 ==> 0 to 9
}   

function convertTemp() {
  var c = document.getElementById('ctemp'),
      f = document.getElementById('ftemp');
  c.value = parseFloat(Math.round((f.value - 32) * 5 / 9)).toFixed(2);


  tf = f.value, tc = c.value;

  flist.push(tf);  clist.push(tc);

  var str = "";
    str += '\t' + tf + '\t' + '&nbsp' + '&nbsp' + tc + "\n";
    document.getElementById("txtArea").innerHTML = str;


}

function averageTemp() {
    var content="";
    var sumF = 0;
    var sumC = 0;


    for (var i = 0; i < flist.length; i++) {
        content += '\t' + flist[i] + '\t' + '&nbsp' + '&nbsp' + clist[i] + "\n";
        sumF += parseInt(flist[i], 10);
        sumC += parseInt(clist[i], 10);
    }
    bars = '===============================';
    var avgF = parseFloat(sumF / flist.length).toFixed(2);
    var avgC = parseFloat(sumC / clist.length).toFixed(2);

    document.getElementById("txtArea").innerHTML = content + bars + "\n" + '\t' + avgF + '\t' + '&nbsp' + '&nbsp' + avgC;
    flist = [];
    clist = [];
    document.getElementById("Avgbtn").disabled=true;
}

function AddResetbutton() {
    document.getElementById('ButtonSpot').innerHTML = '<input type="button" onClick="removeButton();" value="Reset" />';
    document.getElementById("Convertbtn").disabled=true;
}


function removeButton() {
    document.getElementById("myForm").reset();
    document.getElementById('ButtonSpot').innerHTML = '';
    document.getElementById("txtArea").innerHTML = '';
    document.getElementById("Convertbtn").disabled=true;
    document.getElementById("Avgbtn").disabled=true;   
}


</script>

</body>
</html>

Upvotes: 1

Textarea won&#39;t display values after hitting Reset

Answers (1)

Related Questions

Textarea won't display values after hitting Reset