我正在尝试创建一个基本的网站,该网站可以使用JavaScript将文本转换为二进制,但是我真的不知道如何使转换!按钮起作用。有人有我可以使用的简单修复程序吗? (不要介意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/
答案 0 :(得分:1)
看看这个:
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>
它应该给您基本概念...
答案 1 :(得分: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;
}