Блог

Главная - Вопросы по программированию - Таблица вывода подчеркивания текста в javascript

Таблица вывода подчеркивания текста в javascript

#javascript #html #underline

#javascript #HTML #подчеркивание

Вопрос:

Я пытаюсь получить пользовательский ввод и выбрать стиль текста, который он хочет, и вывести выбранный стиль выбора в таблицу

но подчеркивание не отображается вместе с тестом, который написал пользователь, я пытаюсь получить пользовательский ввод и выбрать стиль текста, который он хочет, и вывести выбранный стиль выбора в таблицу

 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>

но подчеркивание не отображается вместе с тестом, который написал пользователь
, я бы хотел, чтобы вводимые пользователем данные отображались в таблице, когда он выбирает подчеркивание

Ответ №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  ;
}