HTML / JavaScript-如何更改图片映射的onClick值

Question

I'm looking to have 'answer5' change to finland, iceland, norway, sweden when the user clicks on said country's flag. 当用户单击该国家的国旗时，我希望将“ answer5”更改为芬兰，冰岛，挪威和瑞典。 I'm not quite sure what I'm doing wrong here but I believe it's somewhere within the image map. 我不太确定自己在做什么错，但我相信它在图像映射中。 Here is my code: 这是我的代码：

<!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>

Just to be clear, I don't want to select an option AND submit with the click on the image map, just change the value so that when I press submit it posts to the php file. 只是为了清楚起见，我不想选择一个选项并单击图像地图来提交，只需更改值，以便在我按Submit时将其发布到php文件。

Answer 1

You've not enclosed the form name in quotes, and you need to update the value attribute (you're trying to update the element itself, not its value). 您尚未将表单名称括在引号中，并且需要更新value属性（正在尝试更新元素本身，而不是其值）。 There was also an odd comma after you try to set the value, which would definitely have thrown an error. 尝试设置该值后，还会出现一个奇数逗号，这肯定会引发错误。 (Check the console for errors when things don't work). （如果操作不正常，请检查控制台是否有错误）。

Try this... 尝试这个...

<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>

HTML / JavaScript-如何更改图片映射的onClick值

问题描述

1 个解决方案

解决方案1
0 2018-03-26 10:30:06

HTML / JavaScript-如何更改图片映射的onClick值

问题描述

1 个解决方案

解决方案1 0 2018-03-26 10:30:06

解决方案1
0 2018-03-26 10:30:06