Java十六进制，二进制，十进制和八进制转换器

Question

<div class="featurebox">
    <h1>Javascript Learning</h1>
    <div class="bag">
       <p>Input Your Value here :<input id="numb" placeholder="provide your value here"> 
        <button class="btn"  onclick="myfunction()">Result</button> 
    </p>


    <table border="1px solid black">
        <tr>
            <td>Decimal Value</td>
            <td>Hexadecimal Value</td>
            <td>Octal Value</td>
            <td>Binary Value</td>
        </tr>
        <tr>
            <td><p id="text1"></p></td>
            <td><p id="text2"></p></td>
            <td><p id="text3"></p></td>
            <td><p id="text4"></p></td>
        </tr>
    </table>
</div>
    <footer>&copy Copyright Reserved by Shah Imran </footer>
   </div>


   <script>
       function myfunction(){
           var val,text1,text2,text3,text4;
        val = document.getElementById("numb").value;

       document.getElementById("text1").innerHTML= val.toString(10);
       document.getElementById("text1").innerHTML= val.toString(16);
       document.getElementById("text1").innerHTML= val.toString(8);
       document.getElementById("text1").innerHTML= val.toString(2);
       }
    </script>

代码有问题吗？我没有在此处附加CSS代码。但是输出在每个字段中显示相同的值。为什么会这样呢？是否存在与变量有关的问题？

Answer 1

您首先需要将字符串值解析为整数：

val = document.getElementById("numb").value;

应该是
val = parseInt(document.getElementById("numb").value);

 
function myfunction() {
  var val, text1, text2, text3, text4;
  val = parseInt(document.getElementById("numb").value);

  document.getElementById("text1").innerHTML = val.toString(10);
  document.getElementById("text2").innerHTML = val.toString(16);
  document.getElementById("text3").innerHTML = val.toString(8);
  document.getElementById("text4").innerHTML = val.toString(2);
}
<div class="featurebox">
  <h1>Javascript Learning</h1>
  <div class="bag">
    <p>Input Your Value here :<input id="numb" placeholder="provide your value here">
      <button class="btn" onclick="myfunction()">Result</button>
    </p>


    <table border="1px solid black">
      <tr>
        <td>Decimal Value</td>
        <td>Hexadecimal Value</td>
        <td>Octal Value</td>
        <td>Binary Value</td>
      </tr>
      <tr>
        <td>
          <p id="text1"></p>
        </td>
        <td>
          <p id="text2"></p>
        </td>
        <td>
          <p id="text3"></p>
        </td>
        <td>
          <p id="text4"></p>
        </td>
      </tr>
    </table>
  </div>
  <footer>&copy Copyright Reserved by Shah Imran </footer>
</div>