Having trouble converting a name to binary? Clicking on JS isn't producing any results? Don't worry,

Question

Having trouble converting a name to binary? Clicking on JS isn't producing any results? Don't worry,

Just starting out as an absolute beginner with programming and watching some tutorial videos. I've got VSC installed, but it's not displaying any errors when I run it. Any suggestions for a better program than VSC?

I'm trying to convert Input: Cipto to Output: 01100011 01101001 01110000 01110100 01101111. Any suggestions on how to do this? I need some simple code to help me understand.

function convert() {
    var input = document.getElementById("name");
    var ouput = document.getElementById("number").value;
    }
output.value = "01100011 01101001 01110000 01110100 01101111";

<html>
<head>
    <body>
        <script src = "1.js"></script>
                Type in Cipto:
                <br>
                <input type = "text" id="name";
                <br>
                <button onClick="convert();">Convert!</button>
                <br>
                <br>
                Output:
                <br>
                <input type = "number" value="number";
            

        </form>
    </body>
</head>
</html>

javascript html css

Answer 1

Answer №1

There was a typo where "ouput" was written instead of "oputput." Additionally, attempting to access a variable declared within a function from outside of its scope is not possible. Lastly, in HTML input, tags should be closed like normal tags.

function convert() {
    var input = document.getElementById("name");
    var output = document.getElementById("number");
    output.value = "01100011 01101001 01110000 01110100 01101111";
}

<html>
<head>
    <body>
        <script src = "1.js"></script>
                Type in Cipto:
                <br>
                <input type="text" id="name">
                <br>
                <button onClick="convert();">Convert!</button>
                <br>
                <br>
                Output:
                <br>
                <input type="text" id="number" value="number">
            

        </form>
    </body>
</head>
</html>

While this code will function, it will always input the same output in the input field. To convert every input to its binary form, the convert function should be written differently as shown below:

function convert() {
  var input = document.getElementById("name").value;
  var output = document.getElementById("number");
  output.value = "";
  for (var letter of input) {
      output.value += letter.charCodeAt(0).toString(2) + " ";
  }
}

<html>
<head>
    <body>
        <script src = "1.js"></script>
                Type in Cipto:
                <br>
                <input type="text" id="name">
                <br>
                <button onClick="convert();">Convert!</button>
                <br>
                <br>
                Output:
                <br>
                <input type="text" id="number">
            

        </form>
    </body>
</head>
</html>

Answer 2

There was a typo where "ouput" was written instead of "oputput." Additionally, attempting to access a variable declared within a function from outside of its scope is not possible. Lastly, in HTML input, tags should be closed like normal tags.

function convert() {
    var input = document.getElementById("name");
    var output = document.getElementById("number");
    output.value = "01100011 01101001 01110000 01110100 01101111";
}

<html>
<head>
    <body>
        <script src = "1.js"></script>
                Type in Cipto:
                <br>
                <input type="text" id="name">
                <br>
                <button onClick="convert();">Convert!</button>
                <br>
                <br>
                Output:
                <br>
                <input type="text" id="number" value="number">
            

        </form>
    </body>
</head>
</html>

While this code will function, it will always input the same output in the input field. To convert every input to its binary form, the convert function should be written differently as shown below:

function convert() {
  var input = document.getElementById("name").value;
  var output = document.getElementById("number");
  output.value = "";
  for (var letter of input) {
      output.value += letter.charCodeAt(0).toString(2) + " ";
  }
}

<html>
<head>
    <body>
        <script src = "1.js"></script>
                Type in Cipto:
                <br>
                <input type="text" id="name">
                <br>
                <button onClick="convert();">Convert!</button>
                <br>
                <br>
                Output:
                <br>
                <input type="text" id="number">
            

        </form>
    </body>
</head>
</html>

Answer 3

Answer №2

I'm still learning my way around here, so please forgive me if I make a mistake, but I noticed errors in both the html and js code you provided. I made some changes to the html:

<html>
    <head>
        <body>
            <script src="1.js"></script>
            Type in your name:
            <br>
            <input type="text" id="name">
            <br>
            <button onClick="convert();">Convert!</button>
            <br>
            <br>
            Output:
            <br>
            <input id="binary-output">
        </body>
    </head>
</html>

As for the JavaScript:

function convert() {
    var input = document.getElementById("name").value;
    var output = document.getElementById("binary-output");
    output.value = "";
    for(var i = 0; i < input.length; i++) {
        output.value += input[i].charCodeAt(0).toString(2) + " ";
    }
}

In the html, I made changes to the input forms by simplifying them and adding ids. In the js function, I converted each character in the input string to its binary ascii value. That's all there is to it! I hope this explanation clears things up.

Answer 4

I'm still learning my way around here, so please forgive me if I make a mistake, but I noticed errors in both the html and js code you provided. I made some changes to the html:

<html>
    <head>
        <body>
            <script src="1.js"></script>
            Type in your name:
            <br>
            <input type="text" id="name">
            <br>
            <button onClick="convert();">Convert!</button>
            <br>
            <br>
            Output:
            <br>
            <input id="binary-output">
        </body>
    </head>
</html>

As for the JavaScript:

function convert() {
    var input = document.getElementById("name").value;
    var output = document.getElementById("binary-output");
    output.value = "";
    for(var i = 0; i < input.length; i++) {
        output.value += input[i].charCodeAt(0).toString(2) + " ";
    }
}

In the html, I made changes to the input forms by simplifying them and adding ids. In the js function, I converted each character in the input string to its binary ascii value. That's all there is to it! I hope this explanation clears things up.

Having trouble converting a name to binary? Clicking on JS isn't producing any results? Don't worry,

Answer №1

Answer №2

Similar questions

Accessing the Angular scope and making modifications using Chrome browser

Node.js: The choice between returning the original Promise or creating a new Promise instance

Eliminate Tracking Parameters from URL

What is the method to deactivate multiple links using jQuery?

Display an icon from the glyphicon library in an Angular application based on a

What is the best way to position my header at the top of my navigation bar?

Struggling to make even the most basic example work with TypeScript and npm modules

Angular JS model not being updated when selecting a date value with datepicker

What is the simplest way to extract only the error message?

If you want to retrieve the calculated value of a div using jQuery

MongoDB does not recognize Db.Collection as a valid function

Text area capacity

Exploring the wonders of accessing POST request body in an Express server using TypeScript and Webpack

Is there a way to create more space between the cards in my project?

The useTransition() method in React remains stuck in the isPending state when making API calls from routes in the /pages/api directory

Is it possible to hide a portion of a jQuery UI draggable element using display:none while maintaining the cursor position?

The appearance of the check box remains stagnant visually

iOS devices are experiencing issues with touchstart and touchend events not functioning when utilizing jquery mobile and cordova

Issue with Bootstrap 4 navbar dropdown on mobile: unable to click on menu item

Execute the component function located within one page using another page