选择单选按钮后如何打印所有 ASCII 或 EBCDIC 值

编程问答 2022-05-24

问题描述

我正在继续开发一个基本网站，其中用户至少输入至少 256 个字符的字符串，选择一个选项（ASCII 或 EBCDIC）进行转换，然后点击提交按钮（运行），输出最终结果页面上的转换结果，显示他们输入的字符串的所有 ASCII 或 EBCDIC 值。我无法让网站根据选定的单选按钮将输入的文本转换为 ASCII 或 EBCDIC 值。下面是我的代码：

1.html：

<!DOCTYPE html>
<html lang="en">
   <head>
      <Meta charset="UTF-8">
      <title>Converter for ASCII or EBCDIC</title>
      <link href="style.css" rel="stylesheet" type="text/css"/>
      <script src="encoding.js" defer></script>
   </head>

   <body style="text-align:center;">
    <label for="text">Enter a text that is at least 256 characters long</label><br>
    <input type="text" id="text_id" name="text" minlength="256">

    <p>Select the following:</p>
    <div>
        <input id="ascii" type="radio" name="encoding" value="ascii">
        <label for="ascii">ASCII</label>
    </div>
    <div>
        <input id="ebcdic" type="radio" name="encoding" value="ebcdic">
        <label for="ebcdic">EBCDIC</label>
    </div>
    <button onclick="myFunction()" type="button">"Run!"</button>
    <label for="button">"Run!"</label>
    <p id="demo" style="color:red;">
   </body>
</html>

style.css:

body 
{
  font: 12pt Arial;   
}

input[type=radio] + label::before 
{
   border-radius: 10px;   
}
input {
  border: 2px solid currentcolor;
}
input:invalid {
  border: 2px dashed red;
}
input:invalid:focus {
  background-image: linear-gradient(pink,lightgreen);
}
encod

编码.js：

function myFunction() 
{
  let str = document.getElementById("text_id");
  let a = "ASCII Code is == >  ";
  // Below checks to see if the user selects a radio button
  let radio_selected = false;
  document.querySelectorAll('input[type="radio"]').forEach(function(radio) 
  {
    if (radio.checked) 
    {
      radio_selected = true;
    }
  })
  if (!radio_selected) 
  {
    console.log("The radio has not been checked,please select a button");
    return;
  }
  if (str.value.length >= 256) 
  {
    //loop that checks the entire string the user has entered and prints all converted values
    for (let i = 0; i < str.length; i++) 
    {
        document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + a + str.value.charCodeAt(i);
    }
  } 
  else if (str.value.length < 256) 
  {
    console.log("null");
    return null;
    // prints and returns null if the user entered a string less than 256 characters
  }
  document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + a + str.value.charCodeAt(i);
}

输入验证（至少 256 个字符）和按钮选择验证（用户需要选择按钮）已经完成，但是，输入值基于选定按钮的转换以及所有字符以 ASCII 或EBCDIC 是我感到困惑的地方。

解决方法

您可以通过以下操作检查按钮是否被选中

function myFunction() {

    //Get both elements
    const ascii = document.getElementById('ascii')
    const ebcdic = document.getElementById('ebcdic')

    let str = document.getElementById("text_id");
    let a = "ASCII Code is == >  ";

    // Below checks to see if the user selects writed more than 255 chars
    if (str.value.length < 256) {
        console.log("null");
        return null;
        // prints and returns null if the user entered a string less than 256 characters
    }

    // Below checks to see if the user selects a radio button
    let radio_selected = false;
    document.querySelectorAll('input[type="radio"]').forEach(function (radio) {
        if (radio.checked) {
            radio_selected = true;
        }
    })
    if (!radio_selected) {
        console.log("The radio has not been checked,please select a button");
        return;
    }
    
    //If one of the elements is checked it triggers a condition,if the other is cheked it triggers the other condition
    if (ascii.checked) {
        for (let i = 0; i < str.value.length; i++) {
            document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + str.value.charCodeAt(i);
        }
    }
    else if (ebcdic) {
        //function to convert to ebcdic,(I do not know how to do this)
    }

}
asciiasciiebcdichtmljavascript