Click here to Skip to main content
15,122,003 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
(Unformatted copy of code removed)

What I have tried:

HTML
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">  
 <title>textBoxes.html</title>
 <script type = "text/javascript">
 //input
 
 function processForm(){
 var txtNormal = document.getElementById("txtNormal");
 var pwd = document.getElementById("pwd");
 var hidden = document.getElementById("hidden");
 var txtArea = document.getElementById("txtArea");
 
  var normal = txtNormal.value;
  var password = pwd.value;
  var secret = hidden.value;
  var bigText = txtArea.value;
  
  //create output
  var result = "" 
  result += "<dl> \n";
  result += " <dt>normal</dt> \n ";
  result += " <dd>" + normal + "</dd> \n";
  result += " \n";
  result += "<dl>";
  result += " <dt>password</dt> \n ";
  result += "<dd>" + password + "</dd> \n";
  result += " \n";
  result += "<dl>";
  result += " <dt>secret</dt> \n ";
  result += "<dd>" + secret + "</dt> \n";
  result += " \n";
  result += " <dt>big text</dt> \n ";
  result += "<dd>" + bigText + "</dt> \n";
  result += "<\dl> \n";
  
  var output = document.getElementById("output") ;
  output.innerHTML = result;
 }
 </script>
 </head>
 <body>
 <h1>Text input Device </h1>
 <form action = "">
 <fieldset>
    <label>Normal Text Field</label>
    <input type = "text"
           id = "txtNormal" />
    <input type = "password"
            id = "pwd"  />
    <label>Hidden</label><br>
    <input type = "hidden"
            id =   "hidden" 
            value = "I can't tell you" /><br>
    <textarea id = "txtArea"
                row = "10"
                cols = "40">
               
    This is a big area
    It can hold a lot of text.
    </textarea> 
    <button type = "button"
            onclick = "processForm()"> 
           Click Me 
   </button>
  </fieldset>
 </form>
 <div id = "output"
 </div>
 </body>
Posted
Updated 8-Aug-21 22:54pm
v2

1 solution

You have too many opening <dl> tags. Remove the extras.

Also, you have the wrong "slash" in the closing tag - it needs to be </dl>, not <\dl>.
JavaScript
var result = "" 
result += "<dl> \n";
result += " <dt>normal</dt> \n ";
result += " <dd>" + normal + "</dd> \n";
result += " \n";
// result += "<dl>";
result += " <dt>password</dt> \n ";
result += "<dd>" + password + "</dd> \n";
result += " \n";
// result += "<dl>";
result += " <dt>secret</dt> \n ";
result += "<dd>" + secret + "</dt> \n";
result += " \n";
result += " <dt>big text</dt> \n ";
result += "<dd>" + bigText + "</dt> \n";
result += "</dl> \n";

Beyond that, you haven't actually described a problem.

If you're not happy with the layout of the <dl>, then use CSS to style it - eg:
CSS
dl {
    display: grid;
    grid-template-columns: auto 1fr;
}
dt {
    text-align: right;
    margin-right: 20px;
}
If that's not what you're asking, then you need to update your question to explain what the problem is.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900