javascript - 为什么我在其他网站上运行时会收到错误 Uncaugt ReferenceError？

Question

我的目标是让该工具在网站上运行：one-stop-office-shop.nl 我的工具适用于 codepen.io ( https://codepen.io/teun-van-lith/pen/mdwNYJN )

<script language="javascript" type="text/javascript">
function tcoberekenen(){

const zwart=0.00849;
const kleur=0.05486;

let aantalzwart=document.rekenen.aantalzwart.value;
let aantalkleur=document.rekenen.aantalkleur.value;
var zwarttotaal=document.rekenen.zwarttotaal.value;
var kleurtotaal=document.rekenen.kleurtotaal.value;
var zwarttotaal=aantalzwart*zwart;
var kleurtotaal=aantalkleur*kleur;
var totaal=zwarttotaal+kleurtotaal;
document.rekenen.zwarttotaal.value=zwarttotaal.toFixed(2);
document.rekenen.kleurtotaal.value=kleurtotaal.toFixed(2);
document.rekenen.totaal.value=totaal.toFixed(2);
}
</script>

<div onclick="tcoberekenen()" id="rekentool"> 
  
<form name="rekenen" /><input onclick="tcoberekenen()" id="input" name="aantalzwart" /> 
<div id="inlinetext"><a id="tcotext">x zwart</a></div>
<div id="inlinetext3"><a id="tcotext">€&lt;/a></div><input id="output" name="zwarttotaal" /> <br /><input onclick="tcoberekenen()" id="input" name="aantalkleur" /> 
<div id="inlinetext"><a id="tcotext">x kleur</a></div>
<div id="inlinetext3"><a id="tcotext">€&lt;/a></div><input id="output" name="kleurtotaal" /> 
<div id="inlinetext2"><a id="tcotext">Totale afdrukkosten:</a></div>
<div id="inlinetext4"><a id="tcotext">€&lt;/a></div><input id="outputtotaal" name="totaal" /> 
</form>

</div>

<style>
#input {
border:none;     
background-image:none;     
background: #666;
height: 30px;    
width: 100px;
float:left;
color: white;
padding-left: 10px;
 }
  
#output {    
border:none;     
background-image:none;     
background: #444;
color: white;     
size="3";      
border:none;    
background-image:none;    
height: 30px;    
width: 100px;   
float:left;
}   

#outputtotaal {
border:none;     
background-image:none;     
background: #f58026;   
width: 100px;     
color: white;     
size="3";     
border:none;    
background-image:none;    
height: 30px;
float:left;
} 

#rekentool {
color: white;     
font-family: verdana;
background: #fff;
width: 340px;     
height: 160px;
float:left;
overflow: auto;
}      
  
#tcotext {
color:#fff;
text-decoration: none;
float:left;
font-size: 14px;
padding: 7px;
}

#h2tco {
color: black;
font-size: 20px;
padding-bottom: 10px;
}  

#inlinetext {
float:left;
background-color: #f58026;;
width: 70px;
height: 30px;
}
  
#inlinetext2 {
float:left;
background-color: #444;
width: 170px;
height: 30px;
}
  
#inlinetext3 {
border:none;    
float:left;
background-color: #444;
width: 15px;
height: 30px;
}
  
#inlinetext4 {  
float:left;
background-color: #f58026;
width: 15px;
height: 30px;
}
</style>`

并在标准的html中。

甚至还有这个网站可以使用工具。 https://training.2thenext.nl/i/Rekentool.html

链接到它不起作用的网站： https ://www.one-stop-office-shop.nl/artikel/225638/laserprinter-brother-hl-l9310cdw.html

错误：未捕获的 ReferenceError：tcoberekenen 未在 HTMLInputElement.onclick 中定义（laserprinter-brother-hl-l9310cdw.html:1146）

代码是一样的。我只是不明白。

标签： javascripthtmlcssinline