如何取消模糊图像
How do I unblur an image?
我在使用 javascript 创建游戏时遇到了一些问题。我不能使用jquery。我遇到的问题是，当我选择模糊的图像时，它不会取消模糊，它应该这样做。我尝试更改函数的名称、图像、加载名称，但这似乎不起作用。我还检查了 F12 开发人员工具并进行了所需的更改，但仍然没有运气使其工作。
有人可以看看下面的代码，并给我一些帮助，为什么它不起作用。我是javascript的新手，所以我仍然习惯它。
<!DOCTYPE html>
<html>
<head>
<title> Who Am I? </title>
<script type="text/javascript">
var imageone = document.getElementById("Zero");
var imagetwo = document.getElementById("One");
var imagethree = document.getElementById("Two");
var imagefour = document.getElementById("Three");
var imagefive = document.getElementById("Four");
var imagesix = document.getElementById("Five");
window.onload = init1;
function init1 () {
var imageone = document.getElementById("Zero");
imageone.onclick = showAnswerone;
}
function showAnswerone () {
var imageone = document.getElementById("Zero");
imageone.src="Zero.jpg";
}
window.onload = init2;
function init2 () {
var imagetwo = document.getElementById("One");
imagetwo.onclick = showAnswertwo;
}
function showAnswertwo () {
var imagetwo = document.getElementById("One");
imagetwo.src="One.jpg";
}
window.onload = init3;
function init3 () {
var imagethree = document.getElementById("Two");
imagethree.onclick = showAnswerthree;
}
function showAnswerthree () {
var imagethree = document.getElementById("Two");
imagethree.src="Two.jpg";
}
window.onload = init4;
function init4 () {
var imagefour = document.getElementById("Three");
imagefour.onclick = showAnswerfour;
}
function showAnswerfour () {
var imagefour = document.getElementById("Three");
imagefour.src="Three.jpg";
}
window.onload = init5;
function init5 () {
var imagefive = document.getElementById("Four");
image.onclick = showAnswerfive;
}
function showAnswerfive () {
var imagefive = document.getElementById("Four");
imagefive.src="Four.jpg";
}
window.onload = init6;
function init6 () {
var imagesix = document.getElementById("Five");
imagesix.onClick = showAnswersix;
}
function showAnswersix () {
var imagesix = document.getElementById("Five");
imagesix.src="Five.jpg";
}
function submitForm()
{
var var_one = 0, var_two = 0, var_three = 0;
var var_four = 0, var_five = 0, var_six = 0;
}
function var_oneb(){
var_one=5;
return true;
}
function var_onea(){
var_one=0;
return true;
}
function var_twob(){
var_two=5;
return true;
}
function var_twoa(){
var_two=0;
return true;
}
function var_threeb(){
var_three=5;
return true;
}
function var_threea(){
var_three=0;
return true;
}
function var_fourb(){
var_four=5;
return true;
}
function var_foura(){
var_four=0;
return true;
}
function var_fiveb(){
var_five=5;
return true;
}
function var_fivea(){
var_five=0;
return true;
}
function var_sixb(){
var_six=5;
return true;
}
function var_sixa(){
var_six=0;
return true;
}
function results_addition() {
var var_results=var_one+var_two+var_three+var_four+var_five+var_six;
if(var_results<=29){
document.getElementById('choice1').value="Not all answers are correct";
}
else{
if(var_results>=30){
document.getElementById('choice1').value="All answers are correct";
}
else{
document.getElementById('choice1').value="All answers are correct";
}
}
}
</script>
<style>
body {
background-color: #ff0000;
}
div#grid {
position: relative;
width: 500px;
height: 300px;
margin-left: 50;
margin-right: 50;
}
table {
border-spacing: 0px;
position: absolute;
left: 40px;
top: 40px;
border-collapse: collapse;
padding: 0px;
margin: 0px;
}
td {
border: 1px solid white;
text-align: center;
width: 160px;
height: 110px;
vertical-align: middle;
align-content: stretch;
padding: 5px;
margin: 0px;
}
h2 {
font-family: verdana, arial;
text-align: center;
color: white;
font-size: 30px;
}
h3 {
font-family: verdana, arial;
text-align: center;
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<div id="grid">
<h2> Who Am I? </h2>
<table>
<tr>
<td> <img id = "Zero" src = "Zeroblur.jpg"> </td>
<td> <img id = "One" src = "Oneblur.jpg"> </td>
<td> <img id = "Two" src = "Twoblur.jpg"> </td>
</tr>
<tr>
<td> <img id = "Three" src = "Threeblur.jpg"> </td>
<td> <img id = "Four" src = "Fourblur.jpg"> </td>
<td> <img id = "Five" src = "Fiveblur.jpg"> </td>
</tr>
</table>
</div>
<br><br><br><br><br><br><br><br>
<h3> I am a Rugby League Player. </h3>
<h3> Click on me to reveal my identity! </h3>
<br>
<h3>Which Player am I</h3>
<hr>
<form action="">
<h3>Player 1 </h3>
<center>
<h3>
Shaun Johnson <INPUT TYPE="radio" NAME="Ra1" VALUE="0" OnClick="var_onea()">
Sonny Bill Williams <INPUT TYPE="radio" NAME="Ra1" VALUE="5" OnClick="var_oneb()">
</h3>
</center>
<br>
<hr>
<h3>Player 2 </h3>
<center>
<h3>
Gareth Widdop <INPUT TYPE="radio" NAME="Ra2" VALUE="0" OnClick="var_twoa()">
Sam Tomkins <INPUT TYPE="radio" NAME="Ra2" VALUE="5" OnClick="var_twob()">
</h3>
</center>
<br>
<hr>
<h3>Player 3 </h3>
<center>
<h3>
James Graham <INPUT TYPE="radio" NAME="Ra3" VALUE="5" OnClick="var_threea()">
Sam Burgess <INPUT TYPE="radio" NAME="Ra3" VALUE="10" OnClick="var_threeb()">
</h3>
</center>
<br>
<hr>
<h3>Player 4 </h3>
<center>
<h3>
Matthew Scott <INPUT TYPE="radio" NAME="Ra4" VALUE="5" OnClick="var_foura()">
Johnathon Thurston <INPUT TYPE="radio" NAME="Ra4" VALUE="10" OnClick="var_fourb()">
</h3>
</center>
<br>
<hr>
<h3>Player 5 </h3>
<center>
<h3>
Neil Lowe <INPUT TYPE="radio" NAME="Ra5" VALUE="5" OnClick="var_fivea()">
Danny Brough <INPUT TYPE="radio" NAME="Ra5" VALUE="10" OnClick="var_fiveb()">
</h3>
</center>
<br>
<hr>
<h3>Player 6 </h3>
<center>
<h3>
Mitch Garbutt <INPUT TYPE="radio" NAME="Ra6" VALUE="5" OnClick="var_sixa()">
Ryan Hall <INPUT TYPE="radio" NAME="Ra6" VALUE="10" OnClick="var_sixb()">
</h3>
</center>
<br>
<hr>
<br>
<center>
<INPUT TYPE="button" VALUE="Calculate" OnClick="results_addition()"> Your Score:
<INPUT TYPE="text" id="choice1" NAME="choice1" VALUE="" SIZE=20>
</center>
</form>
</body>
</html>
简短的回答应该让你回到正轨：
您使用的是onClick而不是onclick将点击事件侦听器添加到图像中。
更长的答案可能有助于使一切正常工作：
将事件侦听器附加到 DOM 事件的方式（例如"单击"或"加载"）可以改进。目前，您正在覆盖 5 次onload方法：
window.onload = init1;
// ...
window.onload = init2;
// ...
// etc.
加载窗口时，只会执行最后一个 set init 方法（在您的情况下为 init6）。
如果要使用 window.onload = method; ，则必须创建一个执行所有单独 init 方法的 init 方法。这样：
function init() {
init1();
init2();
// etc.
};
window.onload = init;
更好的是通过 addEventListener 方法添加事件侦听器。通过使用 addEventListener ，可以添加在事件发生时将执行的多个方法。您可以在此MDN页面上阅读有关此方法的更多信息。
// For just one event listener, this can work:
element.onclick = onClick;
// If you want to execute multiple methods when an event happens, you'll need:
element.addEventListener("click", doSomething);
element.addEventListener("click", doSomethingElse);
除了您的事件处理之外，您还可以改进其他一些内容。有很多重复的代码和函数做同样的事情，但有不同的名称。但我想这是一个不同的问题/话题。
相关文章：
- 如何像模糊图像一样模糊iframe
- 如何通过css模糊除当前悬停之外的所有图像
- 如何使用Javascript模糊背景图像
- 模糊的背景图像，而不是文本
- 将鼠标悬停在 li 上时模糊儿童图像
- 32x32 缩放时图像模糊
- 如何取消模糊图像
- 对多个图像使用模糊图像加载
- 根据滑块图像更改具有模糊效果的页面背景颜色
- 使用PHP，CSS，JavaScript或任何可能的方式模糊不同帐户级别的图像
- 图像的模糊/像素化预加载
- 显示具有模糊效果的图像
- 如何在模糊浏览器主窗口时将图像显示为叠加层
- 取消模糊图像中鼠标悬停在上面的部分
- 如何在滚动时模糊图像
- 如何在没有模糊图像的情况下将隐藏的画布对象复制到图像
- 使用pixastic模糊图像，并使用jquery将其设置为背景
- 缩放和模糊图像在css与响应所有浏览器
- 简单的JavaScript函数来模糊图像
- 模糊图像与JavaScript或jQuery
