时间戳

首页 > 解决方案 > 如何修改此 HTML 文档以使用 DOM 2 事件模型

javascript - 如何修改此 HTML 文档以使用 DOM 2 事件模型

问题描述

我很困惑，我能够使用 DOM 0 Evemt 模型成功完成文档。我只是不确定如何修改它以满足 DOM 2 事件模型标准。我问过 Chegg 的差异导师，他们也想不通。这里肯定有人可以帮助我！:)

PS 我已经阅读了几篇不同的文章，例如这篇关于 DOM2 的http://cs.loc.edu/~chu/ITEC315/ch5/DOM2.html，甚至给出了 DOM2 事件模型文档的示例。我认为它看起来与 DOM 0 非常相似，但对我来说仍然没有意义。我只需要有人查看我的文档并真正指导我完成它并指出一些内容。就像“这就是你在 DOM2 事件模型中所做的事情的方式。

谢谢德雷克！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Tue, 02 Oct 2018 05:15:54 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Assignment1 M5A1</title>
  </head>
  <body>
<h4>Pick your favorite color!</h4>
<form id="myform" action="">
<p>
<label>
<input type="radio" name= "ColorButton" value="1" onclick = "Colorchoice(1)"/>
Red

</label>
<br />


<label>
<input type="radio" name= "ColorButton" value="2" onclick = "Colorchoice(2)"/>
Blue

</label>
<br />



<label>
<input type="radio" name= "ColorButton" value="3" onclick = "Colorchoice(3)"/>
Green

</label>
<br />


<label>
<input type="radio" name= "ColorButton" value="4" onclick = "Colorchoice(4)"/>
Yellow

</label>
<br />



<label>
<input type="radio" name= "ColorButton" value="5" onclick = "Colorchoice(5)"/>
Orange

</label>
<br />

</p>


</form>

<script>
function Colorchoice(Color) {

switch(Color){
case 1:
alert("Your favorite color is Red");
break;


case 2:
alert("Your favorite color is Blue");
break;



case 3:
alert("Your favorite color is Green");
break;




case 4:
alert("Your favorite color is Yellow");
break;



case 5:
alert("Your favorite color is Orange");
break;

default:
alert("Error in JavaScript function Colorchoice");
break;
}
}

</script>

  </body>
</html>

标签： javascripthtmleventsdommodel

解决方案

看起来它正在工作...... https://jsfiddle.net/audshwr0/

<h4>Pick your favorite color!</h4>
<form id="myform" action="">
<p>
<label>
<input type="radio" name= "ColorButton" value="1" onclick = "Colorchoice(event)"/>
Red

</label>
<br />


<label>
<input type="radio" name= "ColorButton" value="2" onclick = "Colorchoice(event)"/>
Blue

</label>
<br />



<label>
<input type="radio" name= "ColorButton" value="3" onclick = "Colorchoice(event)"/>
Green

</label>

<script>
function Colorchoice(event) {
console.log(event.target.value);
}
</script>

推荐阅读