What's wrong with my HTML and javascript code?

Question

I want to implement a simple measurement convergence program but the convert button doesn't really work and it's not even changing the value of the answer box. What should I do now?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Measurement Conversion</title>
</head>
<body>

<h1 align="center">
    Measurement Conversion
</h1>

  <div align="center"><center><table border="0">
    <tr>
      <input type="text" name="what" size="15">
    </tr>
    <tr>
      <td align="center">From:<br>
      <select name="unit" size="9" onChange="convert()">
        <option name="meter">meter</option>
        <option name="mile">mile</option>
        <option name="yard">yard</option>
      </select></td>
    </tr>
    <tr>
      <input type="button" onclick="convert()">Convert it now!</button></td>
    </tr>
    <tr>
      <input type="text" name="answer" title="answer" size="70" value="None"></td>
    </tr>
  </table>
  </center></div>

<script>
function convert() {
    // var FromVal, ToVal, FromName, ToName, v1;

    v1 = document.getElementByName("what").value;
    document.getElementByName("answer").value = v1;

    var unit = document.getElementByName("unit").name;


    if (unit == "yard") {
        var meter = "meter= " + 0.9144*document.getElementByName("what").value;
        var mile = "mile = " + 0.000568181818*document.getElementByName("what").value;
        document.getElementById("answer").value = meter + mile;
    }

    if (unit == "meter") {
        var yard = "yard = " + 1.0936133*document.getElementByName("what").value;
        var mile = "mile = " + 0.000621371192*document.getElementByName("what").value;
        // var meter = "m = " + 0.9144*document.getElementByName("what").value

        document.getElementById("answer").value = yard + mile;
    }

    if (unit == "mile") {
        var meter = "meter = " + 1609.344*document.getElementByName("what").value
        var yard = "yard = " + 1760*document.getElementByName("what").value

        document.getElementById("answer").value = meter + yard;
    }

}
</script>

</body>
</html>

It seems there is something wrong with my convert() function.

There is no `getElementByName` function, only a `getElementsByName` function and this is not how it works. Check your browser console and read the documentation. — Sebastian Simon, Sep 14 '16 at 01:06
it's typically a good practice to describe the expected behavior and the actual behavior when reporting (or asking for help with) a bug. You should add these details. you should also look into writing unit tests - if you have unit tests dfor each of your functions you may identify what's going wrong, yourself — atk, Sep 14 '16 at 01:06
Possible duplicate of [javascript getElementByName doesn't work](http://stackoverflow.com/questions/2980830/javascript-getelementbyname-doesnt-work) — Sebastian Simon, Sep 14 '16 at 01:06

score 2 · Accepted Answer · answered Sep 14 '16 at 01:17

How about using the most basic troubleshooting methods first and then coming here and asking specific questions to help get you through the problem. Add an alert("button Clicked"); to the first line of your function and see if you get the alert. If you do, move the alert to after your variable statements and change it to alert("what = " + what + ", "answer = " + answer + ", unit = " + unit); and make sure you are getting what you expect for your variable assignments. Continue like this and when you get to a specific problem that your can't seem to remedy yourself, come back.

score 1 · Answer 2 · answered Sep 14 '16 at 01:08

1

there's no getElementByName. add attribute id on your input then use getElementById instead.

answered Sep 14 '16 at 01:08

Beginner

4,118
3
17
26

What's wrong with my HTML and javascript code?

2 Answers2