javascript中的文本下划线输出表答案

【问题标题】：Text Underline output table in javascriptjavascript中的文本下划线输出表
【发布时间】：2021-01-13 03:59:02
【问题描述】：

我正在尝试获取用户输入并选择他想要的文本样式并将选定的选择样式输出到表格中

但下划线未与用户编写的测试一起显示我试图获取用户输入并选择他想要的文本样式并将所选选择样式输出到表格中

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>

但下划线未与用户编写的测试一起显示我希望用户输入在他选择下划线时显示在表格中

【问题讨论】：

标签： javascript html underline

【解决方案1】：

我已将您的下划线条件更改为此，现在它可以工作了：

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>

【讨论】：

【解决方案2】：

通过添加以下行，您的问题解决了：

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++;
}

【讨论】：