Javascript 十六进制、二进制、十进制和八进制转换器

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>

Javascript 十六进制、二进制、十进制和八进制转换器

Javascript Hexadecimal, Binary, Decimal & Octal Converter

javascript

numbers

converters