我不知道为什么我的脚本不起作用。当我取消选中粗体和斜体复选框时，它应该使文本“网页设计”正常。而且，对齐和背景颜色 javaScript 根本不起作用。感谢任何人可以提供帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> <!-- Put your page title here --> </title>
<style>
td{border:1px solid;}
</style>
</head>
<body>
<form action="" method="get">
<table>
<tr>
<td width="300px"> <span id="textMessage">Web Design</span></td>
</tr>
<tr>
<td></td>
<td><span>Boldface</span></td>
<td><input type="checkbox" name="type" id="typeBold" value="boldFace" onclick="setBold();" /></td>
<td ></td>
<td><span>Italicized</span></td>
<td><input type="checkbox" name="type" id="typeItalic" value="italics" onclick="setItalic();" />
</td>
<td></td>
</tr>
<tr>
<td><span>Left</span></td>
<td><input type="radio" id="align" name="align" value="left" onclick="setAlign();"/></td>
<td></td>
<td>Center</td>
<td><input type="radio" id="align" name="align" value="center" onclick="setAlign();" /></td>
<td></td>
<td>Right</td>
<td><input type="radio" id="align" name="align" value="right" onclick="setAlign();"/>
</td>
<td></td>
</tr>
<tr>
<td>Red</td>
<td><input type="radio" id="color" name="color" value="red" onclick="setColor();"/></td>
<td></td>
<td>Blue</td>
<td><input type="radio" id="color" name="color" value="blue" onclick="setColor();" /></td>
<td></td>
<td>Green</td>
<td><input type="radio" id="color" name="color" value="green" onclick="setColor();"/>
</td>
<td></td>
</tr>
<tr>
<td ><input type="submit" /></td>
</tr>
</table>
</form>
<script>
function setBold(){
var type = document.getElementById("typeBold").value;
var text = document.getElementById("textMessage");
if(type!=null){
text.style.fontWeight = "bold";
return false;
} else{
text.style.fontWeight = "normal";
}
}
function setItalic(){
var type = document.getElementById("typeItalic").value;
var text = document.getElementById("textMessage");
if(type!=null){
text.style.fontStyle = "italic";
return false;
} else{
text.style.fontStyle = "normal";
}
}
function setAlign(){
var type = document.getElementById("align").value;
var text = document.getElementById("textMessage");
if(type=="left"){
text.style.textAlign = "left";
return false;
}
else if (type=="center"){
text.style.textAlign = "center";
return false;
}
else{
text.style.textAlign = "right";
return false;
}
}
function setColor(){
var type = document.getElementById("color").value;
var text = document.getElementById("textMessage");
if(type=="green"){
text.style.backgroundColor = "lightgreen";
return false;
}
else if (type=="blue"){
text.style.backgroundColor = "lightblue";
return false;
}
else{
text.style.textAlign.backgroundColor = "tomato";
return false;
}
}
</script>
</body>
</html>最佳答案
问题是因为您正在使用复选框的 value 属性。您应该使用checked。
您的 setBold 函数应如下所示
function setBold() {
var isChecked = document.getElementById("typeBold").checked;
var text = document.getElementById("textMessage");
if (isChecked) {
text.style.fontWeight = "bold";
} else {
text.style.fontWeight = "normal";
}
}
不能有多个具有相同 id 的元素，最好将它们更改为 alignLeft、alignCenter 和 alignRight.
关于javascript - 简单的 html 和 javascript 文件 - javaScript 的某些部分无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29933712/