如何让这个“转换”按钮将文本从输入转换为二进制？
我正在尝试创建一个可以使用 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;
}
链接到 JSFiddle：https://jsfiddle.net/SaltySandwich/65te8omy/
波斯汪2回答
-
饮歌长啸
我修复了您现有的项目。我对 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; }如果您需要清除任何内容，请务必在这篇文章下发表评论:) -
慕沐林林
看看这个：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>它应该给你基本的想法......
随时随地看视频慕课网APP
相关分类
JavaScript