Question

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

P.S。我已经阅读了几篇不同的文章，例如这篇http://cs.loc.edu/~chu/ITEC315/ch5/DOM2.html，它讨论了DOM2，甚至给出了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>

Answer 1

看起来像在工作... 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>

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

1 个答案: