HTML / JavaScript-如何更改图片映射的onClick值
[英]HTML/JavaScript - How to change a value onClick of an image map
问题描述
当用户单击该国家的国旗时，我希望将“ answer5”更改为芬兰，冰岛，挪威和瑞典。 我不太确定自己在做什么错，但我相信它在图像映射中。 这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="A quiz page with questions relating to
SSH (Secure Shell) technology" />
<meta name="author" content="Kai Longmore" />
<link rel='stylesheet' type='text/css' href='styles/style.css' />
<title>SSH Research Project - SSH Quiz</title>
</head>
<body>
<header>
<h1>SSH (Secure Shell) </h1>
<h2>A Research Project by Kai Longmore</h2>
<h3>SSH Quiz</h3>
<br/>
</header>
<nav>
<a href="index.html">Home</a>
<a href="topic.html">About SSH</a>
<a href="quiz.html" class="active" href="#SSH Quiz">SSH Quiz</a>
<a href="enhancements.html">Enhancements</a>
</nav>
<br/>
<form name="sshQuiz" id="sshQuiz" method="post"
action="http://mercury.swin.edu.au/it000000/formtest.php">
<fieldset>
<legend>Student Details</legend>
<p><label for="firstName">Name: </label>
<input type="text" name="firstName" id="firstName"
placeholder="First" maxlength="25" required="required"
pattern="^[A-Za-z -]+$" title="Please use only
letters/hyphens/spaces."/>
<input type="text" name="lastName" id="lastName"
placeholder="Last" maxlength="25" required="required"
pattern="^[A-Za-z -]+$" title="Please use only
letters/hyphens/spaces."/></p>
<p><label for="studentID">Student ID: </label>
<input type="text" name="studentID" id="studentID"
placeholder="e.g. s123456789" required="required" pattern="
(\w{1}\d{6}(\d{3})?)" title="Please enter either 7 or 10
characters, beginning with the letter 's'."/></p>
</fieldset>
<br/>
<fieldset>
<legend>Question 1</legend>
<p><label for="answer1">In what year was the SSH-1 protocol
released?</label><br/><br/>
<input type="text" name="answer1" id="answer1" pattern="[0-9]
{1,4}" placeholder="e.g. 2018" required="required" title="Please
enter a year with up to 4 digits."/></p>
</fieldset>
<br/>
<fieldset>
<legend>Question 2</legend>
<p><label for="answer2">Who developed the SSH-1 protocol?
</label><br/><br/>
<input type="radio" name="answer2" value="wuXian"
required="required"/> Wu Xian<br/>
<input type="radio" name="answer2" value="mohammadHaddad"/>
Mohammad Haddad<br/>
<input type="radio" name="answer2" value="tatuYlonen"/> Tatu
Ylönen<br/>
<input type="radio" name="answer2" value="fredrikJohannsen"/>
Fredrik Jöhannsen</p>
</fieldset>
<br/>
<fieldset>
<legend>Question 3</legend>
<p><label for="answer3_1">Select as many SSH <em>protocols</em>
as you see.</label><br/><br/>
<input type="checkbox" name="answer3_1" value="ssh2"/> SSH-
2<br/>
<input type="checkbox" name="answer3_2" value="openBSD"/>
OpenBSD<br/>
<input type="checkbox" name="answer3_3" value="ssh1"/> SSH-
1<br/>
<input type="checkbox" name="answer3_4" value="openSSH"/>
OpenSSH</p>
</fieldset>
<br/>
<fieldset>
<legend>Question 4</legend>
<p><label for="answer4">SSH is an: </label><br/><br/>
<select name="answer4" form="sshQuiz" required="required">
<option value="">Please select...</option>
<option value="applicationLayer">Application layer
protocol</option>
<option value="transportLayer">Transport layer
protocol</option>
<option value="internetLayer">Internet layer
protocol</option>
<option value="linkLayer">Link layer protocol</option>
</select>
</fieldset>
<br/>
<fieldset>
<legend>Question 5</legend>
<p><label for="answer5">Click on the flag of the country where
the SSH-1 protocol was first developed.</label>
<input type="text" name="answer5" id="answer5" value="">
<img src="images/flags.jpg" width="400" height="400"
alt="Scandinavian flags" usemap="#flagsMap">
<map name="flagsMap" form="sshQuiz" required="required">
<area shape="rect" coords="0,0,200,200" alt="Finland"
nohref
onClick="document.forms[sshQuiz].answer5='finland',">
<area shape="rect" coords="200,0,400,200" alt="Iceland"
nohref
onClick="document.forms[sshQuiz].answer5='iceland',">
<area shape="rect" coords="0,200,200,400" alt="Norway"
nohref
onClick="document.forms[sshQuiz].answer5='norway',">
<area shape="rect" coords="200,200,400,400" alt="Sweden"
nohref
onClick="document.forms[sshQuiz].answer5='sweden',">
</fieldset>
<br/>
<fieldset>
<input type="submit">
</fieldset>
只是为了清楚起见，我不想选择一个选项并单击图像地图来提交，只需更改值，以便在我按Submit时将其发布到php文件。
1 个解决方案
解决方案1
0 2018-03-26 10:30:06
您尚未将表单名称括在引号中，并且需要更新value属性（正在尝试更新元素本身，而不是其值）。 尝试设置该值后，还会出现一个奇数逗号，这肯定会引发错误。 （如果操作不正常，请检查控制台是否有错误）。
尝试这个...
<map name="flagsMap" form="sshQuiz" required="required">
<area shape="rect" coords="0,0,200,200" alt="Finland" nohref
onClick="document.forms['sshQuiz'].answer5.value='finland'">
<area shape="rect" coords="200,0,400,200" alt="Iceland" nohref
onClick="document.forms['sshQuiz'].answer5.value='iceland'">
<area shape="rect" coords="0,200,200,400" alt="Norway" nohref
onClick="document.forms['sshQuiz'].answer5.value='norway'">
<area shape="rect" coords="200,200,400,400" alt="Sweden" nohref
onClick="document.forms['sshQuiz'].answer5.value='sweden'">
</map>
如何在onclick函数Javascript html中更改onclick函数
[英]How to change the onclick function inside an onclick function Javascript html
如何在 html 和 javascript 上使用 onclick 多次更改图像源
[英]how to change an image source more than once using onclick on html and javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.