Text Underline output table in javascript

Question

Im trying to get user input and select the style of the text that he wants and output the selected select style into a table

but the underline is not showing along with the test that the user wrote Im trying to get user input and select the style of the text that he wants and output the selected select style into a table

var row = 1;

function show()
{
    var style = document.getElementById("textstyle").value;
    var table = document.getElementById("tablee");
    var input = document.getElementById("textt").value;
    var output = input;
    
    
    

    var add = table.insertRow(row);
    var add1 = add.insertCell(0);
    var add2 = add.insertCell(1);
    var add3 = add.insertCell(2);
    
    
    
    if(style=="Bold")
    {
        
        output=output.bold();
    }
    if(style=="Italic")
    {
        
        output=output.italics();
        
    }
    if(style=="Underline")
    {
        var t=createTextNode(input)
        var x=document.createElement("U");
        x.appendChild(t);
        
        document.table.appendChild(x);
        
        add1.innerHTML = style;
        add2.innerHTML = input;
        
        
    }
    else{
    
        add1.innerHTML = style;
        add2.innerHTML = input;
        add3.innerHTML = output;
    }
    
    row++;
}

<!DOCTYPE html>
<html>
<head>
    <title>Question4(Pair)</title>
    <link rel="stylesheet" href="PairQ4.css">
    <script src = "PairQ4.js"></script>
    
    
</head>

<body>
    <label>Please Enter a sentence</label></br></br>
    <input type="text" id="textt" name="textt"></br></br>
    
    
    <label>Select a style :</label>
    
    <select class="txtstyle" id="textstyle">
        <option  value="Bold"> Bold </option>
        <option  value="Italic"> Italic </option>
        <option  value="Underline"> Underline </option>
        <option  value="Strikethrough"> Strikethrough </option>
        <option  value="Highlight"> Highlight </option>
    </select></br></br>

    
    
    <table id = "tablee"> 
     <tr> 
     <th>Format</th> 
     <th>Description</th>
     <th>output</th> 
     </tr>
     
     </table>
     </br></br>
     <input type= "button" value="Submit" onclick="show()">
     
     
    

</body>

but the underline is not showing along with the test that the user wrote i would like the users input to display in the table when he selects underline

Asaf · Accepted Answer · 2020-09-27 10:52:16Z

I've changed your underline condition to this, and now it's working:

if(style=="Underline"){
  var x=document.createElement("U");
  x.textContent = input;
  
  add1.innerHTML = style;
  add2.innerHTML = input;
  add3.appendChild(x);
}

var row = 1;

function show()
{
    var style = document.getElementById("textstyle").value;
    var table = document.getElementById("tablee");
    var input = document.getElementById("textt").value;
    var output = input;
    
    
    

    var add = table.insertRow(row);
    var add1 = add.insertCell(0);
    var add2 = add.insertCell(1);
    var add3 = add.insertCell(2);
    
    
    
    if(style=="Bold")
    {
        
        output=output.bold();
    }
    if(style=="Italic")
    {
        
        output=output.italics();
        
    }
    if(style=="Underline")
    {
        var x=document.createElement("U");
        x.textContent = input;
        
        add3.appendChild(x);
        
        add1.innerHTML = style;
        add2.innerHTML = input;
        
        
    }
    else{
    
        add1.innerHTML = style;
        add2.innerHTML = input;
        add3.innerHTML = output;
    }
    
    row++;
}

<!DOCTYPE html>
<html>
<head>
    <title>Question4(Pair)</title>
    <link rel="stylesheet" href="PairQ4.css">
    <script src = "PairQ4.js"></script>
    
    
</head>

<body>
    <label>Please Enter a sentence</label></br></br>
    <input type="text" id="textt" name="textt"></br></br>
    
    
    <label>Select a style :</label>
    
    <select class="txtstyle" id="textstyle">
        <option  value="Bold"> Bold </option>
        <option  value="Italic"> Italic </option>
        <option  value="Underline"> Underline </option>
        <option  value="Strikethrough"> Strikethrough </option>
        <option  value="Highlight"> Highlight </option>
    </select></br></br>

    
    
    <table id = "tablee"> 
     <tr> 
     <th>Format</th> 
     <th>Description</th>
     <th>output</th> 
     </tr>
     
     </table>
     </br></br>
     <input type= "button" value="Submit" onclick="show()">
     
     
    

</body>

Mehrzad Tejareh · Accepted Answer · 2020-09-27 11:03:43Z

by adding below line your problem solved:

add3.innerHTML = "<span style='text-decoration: underline;'>"+output+"</span>";

var row = 1;

function show()
{
    var style = document.getElementById("textstyle").value;
    var table = document.getElementById("tablee");
    var input = document.getElementById("textt").value;
    var output = input;
    
    
    

    var add = table.insertRow(row);
    var add1 = add.insertCell(0);
    var add2 = add.insertCell(1);
    var add3 = add.insertCell(2);
    
    
    
    if(style=="Bold")
    {
        
        output=output.bold();
    }
    if(style=="Italic")
    {
        
        output=output.italics();
        
    }
    if(style=="Underline")
    {
        
        add1.innerHTML = style;
        add2.innerHTML = input;
        add3.innerHTML = "<span style='text-decoration: underline;'>"+output+"</span>";
        
    }
    else{
    
        add1.innerHTML = style;
        add2.innerHTML = input;
        add3.innerHTML = output;
    }
    
    row++;
}

Collectives™ on Stack Overflow

Text Underline output table in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related