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 代码。 但是 output 在每个字段中显示相同的值。 为什么会这样？ 有没有与变量有关的问题？

Answer 1

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

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>