如何使这个“转换”按钮将文本从输入转换为二进制？答案

【问题标题】：How do I make this “Convert” button translate text from an input to binary?如何使这个“转换”按钮将文本从输入转换为二进制？
【发布时间】：2020-10-31 16:57:36
【问题描述】：

我正在尝试创建一个可以使用 JavaScript 将文本转换为二进制的基本网站，但我真的不知道如何使 Convert! 按钮起作用。有人有我可以使用的简单修复吗？（别介意 CSS 少了一些代码，我还没说完。）

function convert() {
  const input_el = document.querySelector(".input-text");
  const output_el = document.querySelector(".output-binary");

  input_el.addEventListener("input", (event) => {
    let input_text = event.target.value;
    let output_arr = [];
    
    for (var i = 0; i < input_text.length; i++) {
      output_arr.push(input_text.charCodeAt(i).toString(2));
    }
    
    output_el.innerHTML = output_arr.join(" ");
  });
}

body {
  margin: 0;
  padding: 0;
}

header {
  padding: 30px;
  background: #09A954;
  color: white;
  text-align: center;
  font-family: arial;
  font-size: 30px;
}

.navbar {
  padding: 12px;
  background: #363636;
  color: white;
  font-size: 15px;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 80px;
  background: #B3B3B3;
}

.input_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background: #D35400;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0px 3px 5px #000000;
  height: 100px;
  width: ;
}

input {
  background: #D35400;
  border: none;
  border-bottom: 2px solid #000000;
  font-size: 15px;
}

button {
  width: 100px;
}

.output_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background: #2980B9;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0px 3px 5px #000000;
  height: 100px;
  width: ;
}

p2 {
  font-size: 30px;
  font-family: calibri;
}

p4 {
  font-size: 15px;
  font-family: arial;
}

<!DOCTYPE html>
<html>

<head>
  <title>Text to binary converter</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <h1>Text to binary converter</h1>
  </header>

  <div class="navbar">
    <p1>link</p1>
  </div>

  <div class="container">
    <div class="input_box">
      <p2>This is what a human sees:</p2><br>
      <p3>Please enter text below</p3><br>
      <input type="text" name="" class="input-text">
    </div><br><br>

    <button onclick="convert()">Convert!</button><br><br>

    <div class="output_box">
      <p2>This is what a machine sees:</p2><br>
      <p4 class="output-binary"></p4>
    </div>
  </div>

  <script type="text/javascript" src="main.js"></script>

</body>

</html>

JSFiddle 链接：https://jsfiddle.net/SaltySandwich/65te8omy/

【问题讨论】：

欢迎来到 StackOverflow！看起来您没有包含 convert() 函数的代码，请您包含它吗？
@CoodleNoodle convert 功能就在那里。
你的convert 除了绑定另一个事件监听器之外什么都不做。你不需要在这里绑定另一个；而是在 convert 中进行转换。

标签： javascript html

【解决方案1】：

我修复了您现有的项目。
我对 JavaScript 采取了一种更简单的方法。您可以在 JavaScript 代码中用 6 行代码编写所需的所有内容 :)
对于您的输出，您应该使用<output> 而不是<input>。
看看这个：

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

body {
  margin: 0;
  padding: 0;
}

header {
  padding: 30px;
  background: #09A954;
  color: white;
  text-align: center;
  font-family: arial;
  font-size: 30px;
}

.navbar {
  padding: 12px;
  background: #363636;
  color: white;
  font-size: 15px;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 80px;
  background: #B3B3B3;
}

.input_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background: #D35400;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0px 3px 5px #000000;
  height: 100px;
  width: ;
}

input {
  background: #D35400;
  border: none;
  border-bottom: 2px solid #000000;
  font-size: 15px;
}

input:focus {
  border: none;
  border-bottom: 2px solid #000000;
  font-size: 15px;
  outline: none;
}

button {
  width: 100px;
}

.output_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  background: #2980B9;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0px 3px 5px #000000;
  height: 100px;
  width: ;
}

p2 {
  font-size: 30px;
  font-family: calibri;
}

p4 {
  font-size: 15px;
  font-family: arial;
}

<!DOCTYPE html>
<html>

<head>
  <title>Text to binary converter</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <h1>Text to binary converter</h1>
  </header>

  <div class="navbar">
    <p1>link</p1>
  </div>

  <div class="container">
    <div class="input_box">
      <p2>This is what a human sees:</p2><br>
      <p3>Please enter text below</p3><br>
      <!--INPUT FIELD-->
      <input id="input_text" value="Human sees this" />
    </div><br><br>

    <button onclick="convert()">Convert!</button><br><br>

    <div class="output_box">
      <p2>This is what a machine sees:</p2><br>
      <!--INPUT FIELD-->
      <output id="output_text">
        </div>
    </div>

    <script src="main.js"></script>

</body>

</html>

哦..我还稍微编辑了你的 CSS，所以输入没有烦人的边框......你可以通过删除这个来删除我的更改：

  input:focus {
    border: none;
    border-bottom: 2px solid #000000;
    font-size: 15px;
    outline: none;
  }

如果您需要清除任何内容，请务必在此帖子下发表评论：）

【讨论】：

不客气！如果您还需要其他任何东西，请务必询问:)

【解决方案2】：

看看这个：

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

input {font-size:12px; width:200px;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <input id="ti1" value ="Human sees this"/>
        <input id="ti2" value ="Machine sees this"/>
        <button onclick="convert();">Convert!</button>
        <script src="main.js"></script>
    </body>
</html>

它应该给你基本的想法......

【讨论】：

抱歉，我对 HTML 和 Javascript 编码非常陌生，所以您发布的代码对我没有太大帮助。但是你知道为什么我的脚本不工作吗？
我现在会调查并尽快通知您:)