改变后台javascript功能不工作

Change Background javascript function not working

本文关键字：工作 功能 javascript 后台 改变      更新时间：2023-09-26

下面的代码似乎编译没有任何错误，但是"changebackground"函数不起作用。当你点击它时，它什么也不做。我不认为语法有问题，但不能确定。没有错误，只是没有响应，当我点击单元格。"MyClick"可以，但"ChangeBackground"不行。

有什么想法?

<html><body>
<head>
<style>
table,th
{ 
border:1px solid black
font-size:  15px;
font-family: Arial;
font-weight: bold;
empty-cells: show;
}
</style>
<style>
td
{ 
font-size: 10px;
font-weight: normal;
font-family: Arial;
border:1px solid black;
empty-cells: show;
align = "middle;"
}
</style>
<style>
p
{ 
font-size: 18px;
font-weight: bold;
font-family: Arial;
}
</style>
<style>
a.1{ text-decoration:none;color:WindowText}
</style>
<style>
#header{ display:block;top:0px;left:0px;width:100%;height: 112px;position:fixed;background-color: #ffffff;border:1px solid #888;}
</style>
<style>
#content{ margin:113px 0px 0px 0px;display:block;border:1px solid #888;}
</style>

<script type="text/javascript"> function myClick(args) {    window.clipboardData.setData('text',args.toString());   }</script>
<script type="text/javascript"> function changeBackground() {document.getElementById(cellID).style.borderColor = "2px solid red";   }</script>

</head>
 <p>  Scanned Samples </p> <table></table></div>  <p> Rack: 202771 - _SMEYER_IND_AC_2D-02 </p>
<table> 
<thead> 
<tr> 
 <font size = "10"> </font> 
<th> </th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>

</tr> 
</thead> 
<td> <font size = "2"><b>A</b></td>
<td><a class = "1" href = "#abcd"onclick="javascript:myClick('202772')"><center>A1<br>0<br>(202772)</center></td>
 <td id = "Cell9"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202780') "; javascript:changeBackground('Cell9')"> <center> A2<br>0<br>(202780)</center> </td>
<td id = "Cell17"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202788') "; javascript:changeBackground('Cell17')"> <center> A3<br>0<br>(202788)</center> </td>

<td id = "Cell25"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202796') "; javascript:changeBackground('Cell25')"> <center> A4<br>0<br>(202796)</center> </td>

<td id = "Cell33"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202804') "; javascript:changeBackground('Cell33')"> <center> A5<br>0<br>(202804)</center> </td>

<td id = "Cell41"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202812') "; javascript:changeBackground('Cell41')"> <center> A6<br>0<br>(202812)</center> </td>

<td id = "Cell49"><a class = "1" href = "#abcd"onclick=" javascript:myClick('202820') "; javascript:changeBackground('Cell49')"> <center> A7<br>0<br>(202820)</center> </td>

</tr>
 </table> 
 </body></html>

当函数定义没有参数时，您正在使用参数调用changeBackground。下面是一个例子

javascript:changeBackground('Cell9')"

这是你的函数定义

function changeBackground() {
    document.getElementById(cellID).style.borderColor = "2px solid red";   
}

试着把它改成

function changeBackground(cellID) {
    document.getElementById(cellID).style.borderColor = "2px solid red";   
}

同样，这也是非常糟糕的形式。你应该更喜欢stylesheets而不是style标签，你有一堆这样的标签。同样的事情与script标签。请将它们放在外部JavaScript文件中。

还有，你经常使用inline javascript，就像这个例子

onclick=" javascript:myClick('202812') "; javascript:changeBackground('Cell41')"

这使得HTML很难阅读。您应该使用事件侦听器，并将它们放在JavaScript文件中。

另外，HTML5不支持center和font标签。

相关文章：