Question

目标：点击图片，然后在表单字段中填入每个项目的适用信息。表单字段和图像不是必需的，但我认为图像会很好并且填充表单似乎是合乎逻辑的。我想我可以点击文本并弹出一个提示相关信息的警告框，但我选择了这条路径。

代码：

<head>
    <meta charset="ISO-8859-1">
    <title>Restaurant Menu</title>
    <link rel="styleheet" type="text/css" href="../css/style.css">
</head>
<body>

<h1>Restaurant Menu</h1>
<h3>Click on picture for details</h3>
<br>

<img src = "../Images/cheeseburger.jpg" alt = "cheeseburger" id = "cheeseburger" onclick = "cheeseFxn">
<br>
<br>

<img src = "../Images/pizza.jpg" alt = "pizza" id ="pizza" onclick = "pizzaFxn">
<br>
<br>

<img src = "../Images/hotdog.jpg" alt = "hotdog" id = "hotdog" onclick = "hotdogFxn">
<br>
<br>

<img src = "../Images/salad.jpg" alt = "salad" id= "salad" onclick = "saladFxn">


<form name = "details" id = "details">
    <p>Item Title</p>
    <input type = "text" name = "title" id = "title" size = "53" />
    <p>Item Description/List of Ingredients</p>
    <textarea name = "description" id = "description" rows = "5" cols = "40" ></textarea>
    <p>Price $</p>
    <input type = "text" name = "price" id = "price" size = "53"/>
</form>

<script>
    function cheeseFxn(cheeseburger)
    {
        var Title = document.getElementById("title").value = "cheeseburger";
        var Description = document.getElementById("description").value = "100% beef patty with cheese";
        var Price = document.getElementById("price").value = "$7.98";
    }
</script>

</body>

Answer 1

您的功能未被调用，因为您遗失了() onclick。您需要将调用()的函数与所有控件放在一起。像这样：

 <img src = "../Images/cheeseburger.jpg" alt = "cheeseburger"
 id = "cheeseburger" onclick = "cheeseFxn()">

<强> DEMO

JS onclick of image填充表单字段

1 个答案: