问题描述
我试图获取用户输入并选择他想要的文本样式，然后将所选的选择样式输出到表格中
，但下划线未与用户编写的测试一起显示 我试图获取用户输入并选择他想要的文本样式，然后将所选的选择样式输出到表格中
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>，但下划线未与用户编写的测试一起显示 我希望用户输入的内容在选择下划线时显示在表格中
解决方法
我已将您的下划线条件更改为此，现在可以正常工作了：
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>,
通过添加以下行来解决您的问题：
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++;
}