The output is not lining up correctly. The output show line up straight down instead of lining up try across.

Question

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 8-Aug-21 15:42pm

Member 15300219

Updated 8-Aug-21 21:54pm

Richard Deeming

v2

Add a Solution

1 solution

Add a Solution

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

Richard Deeming · Accepted Answer · 2021-08-08T21:54:00

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.

The output is not lining up correctly. The output show line up straight down instead of lining up try across.

1 solution

Solution 1

Add your solution here

Preview 0

The output is not lining up correctly. The output show line up straight down instead of lining up try across.

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us