Question

我是JavaScript新手。我创建了一个表单，并textarea和button并在textarea标记中显示了div的文字，并取了2个按钮。现在我想点击div标签中输出大小的第一个按钮增加，同样点击第二个按钮它变为粗体等等......

<html>
<body>
<form name="myform" onsubmit="return fuc1()">
<table>
<tr><td>Description</td><td> <textarea name="message1" id="message" rows="10" cols="30" font-size:"100px";></textarea><br/></td></tr>
<tr><td><button onclick=fincrease() type="button" name="sizeinc" id="sizeinc" >Increase SIZE</button></td>
<td><button type="button" name="sizedec" id="sizedec" >Decrease SIZE</button></td></tr>
<tr><td><button type="button" onclick="fbold()" name="bold" id="bold" >BOLD</button></td>
<td><button type="button" name="italic" id="italic" >ITALIC</button></td>
<td><button type="button" name="underline" id="underline" >UNDERLINE</button></td></tr>
<tr><td><select id="colors" onclick="fcolor()">
 <option  value="Default">(Please select color)</option>
  <option value="pink">PINK</option>
  <option value="yellow">YELLOW</option>
  <option value="green">GREEN</option>
  <option value="orange">ORANGE</option>
</select>
</td>

<td><select id="borders" onclick="fborder()">
 <option  value="Default">(Please select border)</option>
  <option value="dashed">DOTTED</option>
  <option value="thick solid">Thick Solid</option>
  <option value="solid">Solid</option>
</select></td>
</tr>
<tr><td><input type="submit"/></td></tr>
</table>
<div id="div1">OUTPUT</div>
</form>
<script type="text/javascript">
function fuc1()
 {
var tex=document.getElementById("message").value;
var colr=document.getElementById("colors").value;
var bord=document.getElementById("borders").value;
var increase=document.getElementById("sizeinc").value;
var decrease=document.getElementById("sizedec").value;
var italic1=document.getElementById("italic").value;
var bold1=document.getElementById("bold").value;
var under=document.getElementById("underline").value;

 html=tex;
document.getElementById("div1").innerHTML=html;
return false;
}
function fcolor(){
var c=document.getElementById("colors").value;
if(c=="pink")
{
document.getElementById("div1").style.color= c;
}
if(c=="yellow")
{
document.getElementById("div1").style.color= c;
}
if(c=="green")
{
document.getElementById("div1").style.color= c;
}
if(c=="orange")
{
document.getElementById("div1").style.color= c;
}
}
function fborder(){
var b=document.getElementById("borders").value;
if(b=="dashed")
{
document.getElementById("div1").style.border=b;
}
if(b=="thick solid")
{
document.getElementById("div1").style.border=b;
}
if(b=="solid")
{
document.getElementById("div1").style.border=b;
}
}
function fbold()
{
}
</script>

Answer 1

常规提示：在您的功能中添加一些console.log("...")消息，并在具有控制台的浏览器中打开您的页面（例如在Google Chrome中，按F12）。这将使您能够在测试时查看函数的调用时间。

更具体的提示：在选择列表中，将onclick替换为onchange。

Answer 2

请记住将它们添加到按钮的onclick事件

function fbold()
{
    if (document.getElementById("div1").style.fontWeight == "bold")
    {
        document.getElementById("div1").style.fontWeight = "normal"
    }
    else
    {
        document.getElementById("div1").style.fontWeight = "bold";
    }
}

function fItalic() {
    if (document.getElementById("div1").style.fontStyle == "italic") {
        document.getElementById("div1").style.fontStyle = "normal"
    }
    else {
        document.getElementById("div1").style.fontStyle = "italic";
    }
}

function fUnderline()
{
    if (document.getElementById("div1").style.textDecorationUnderline) {
        document.getElementById("div1").style.textDecorationUnderline = false
    }
    else {
        document.getElementById("div1").style.textDecorationUnderline = true;
    }
}

function fincrease()
{
    if (document.getElementById("div1").style.fontSize == undefined || document.getElementById("div1").style.fontSize == "")
    {
        document.getElementById("div1").style.fontSize = "14px"
    }

    document.getElementById("div1").style.fontSize = (Number(document.getElementById("div1").style.fontSize.replace("px", "")) + 1) + "px"
}

function fdecrease() {
    if (document.getElementById("div1").style.fontSize == undefined || document.getElementById("div1").style.fontSize == "") {
        document.getElementById("div1").style.fontSize = "14px"
    }

    document.getElementById("div1").style.fontSize = (Number(document.getElementById("div1").style.fontSize.replace("px", "")) - 1) + "px"
}

需要javascript中的帮助来增加输出大小

2 个答案: