使用挂起的单选按钮将文本转换为小写/大写

Converting text to lowercase/uppercase with a pending a radio button

本文关键字：大写 转换 文本 挂起 单选按钮      更新时间：2023-09-26

>我正在编写一个Javascript程序，该程序接受用户输入的文本，然后（等待单选按钮检查 - 小写/大写）将输入文本转换为小写/大写并将值输出回表单。

纯粹是想用我自己的Javascript学习。我对JS有点陌生（但很精明）。在HTML，CSS，Java上非常可靠，但与页面元素交互的品牌新事物。

我已经挖了两天来试图解决这个问题。我什至在当地图书馆借了几本书。（目前正在阅读文本，Microsoft CSS/HTML和JS指南）。为了更多地使用JS，您还会推荐哪些其他书籍？

这是下面的代码。虽然我知道可以使用CSS来转换它，我已经做到了。我纯粹只是想弄清楚Javascript。

<!DOCTYPE html>
<html>
<head>  
 <title> Case Changer By: Elliot Granet</title>
 <style>
 function convert(){
  var convertedText = document.test.input.value;
    if(document.getElementById("lowerCase").checked = true){
      var output = convertedText.toLowerCase();
       }else {
       output = convertedText.toUpperCase();
       }
    document.getElementById('outputText').value = output;
}
convert();
</head>

其余的—— 

<body>
<h3>Choose your Conversion method below:</h3>
<form action="getElementById">
  <fieldset>
<input id="lowerCase" type="radio" name="case" value="lowerCase">Lower Case<br>
<input id ="upperCase" type="radio" name="case" value="upperCase">Upper Case<br><br>
    </fieldset>
  <fieldset>
<textarea id="inputText" name="input" form="inputText">Enter text here to be Converted...</textarea>
    </fieldset><br>
  <fieldset>
<textarea id ="outputText" name="output" form="outputText">Converted text will appear here...</textarea>
    </fieldset>
  <input type="button" value="Convert">
</form>
</body>
</html>

您需要进行一些更改才能使此功能正常工作。

  1. style是放置 js 代码的无效标签。您需要将其放在标签<script>
  2. 如果你在里面写这个函数header你可能会遇到错误，因为在DOM准备好之前，它会尝试获取id为inputText的textarea的值。
  3. document.getElementById(idName').value但不是正确的语法，使用 id 获取元素的值
  4. 使用按钮连接convert()。因此，当您单击按钮时，该功能将执行。5. document.getElementById("lowerCase").checked = true这是错误的。这意味着复选框将被选中，因为=将分配值。相反，您需要比较该值。所以使用==或===
  5. 如果您在循环中声明var output if则在 else 中不可用。所以你需要在if-else循环之外声明它

希望这个片段会有用

.HTML

<input type="button" value="Convert" onclick="convert()">

.JS

    window.load =convert; // convert function will be called after window is ready
    function convert(){
     var output; //variable declaration outside if-else loop
      var convertedText = document.getElementById('inputText').value; //document.getElementById
        if(document.getElementById("lowerCase").checked == true){   // == comparision
          output = convertedText.toLowerCase();
           }
           else {
           output = convertedText.toUpperCase();
           }

   document.getElementById('outputText').value = output;
}

例

相关文章：