JS DOM复选框不起作用

时间:2017-11-27 00:54:33

标签: javascript html forms dom

我必须根据用户是否点击复选框启用/禁用textarea。我觉得我的代码是正确的,但由于某种原因,它仍然无法正常工作。我在脚本标签中调用js文件错了吗? javascript文件名是task2.js。

html文件中的代码:

<!DOCTYPE html>
<html>
<head>
<script src="task2.js" type="text/javascript"></script>
<style>
  body { font-family: sans-serif;}
  .entry {
    background-color: silver;
    overflow: hidden;
    padding: 10px;
    border: 2px black solid;
    margin-top: 10px;
  }
  .entry img {
    float:right;
    height: 200px;
    margin:10px;
    border: solid 1px black;
  }
  #container {
    width: 80%;
    padding: 10px;
    background-color: LightSkyBlue;
    margins: auto;
    border: solid 5px black;
    font-size: 1.25em;
  }
  input[type="submit"] {
    font-size: 1.5em;
  }
  h1 { text-align: center;}
</style>
</head>
<body>
<div id="container">
<h2> Order Information </h2>
<div class="entry">
  Select color:
  <select name="color">
    <option selected="selected">White</option>
    <option>Black</option>
    <option>Red</option>
    <option>Green</option>
    <option>Blue</option>
  </select> <br><br>
  Select shirt size:
  <select name="sizeandprice">
    <option>Small - $9.99</option>
    <option>Medium - $10.99</option>
    <option selected="selected">Large - $11.99</option>
    <option>X-Large - $13.99</option>
  </select><br><br>
  Is this a gift? <input type="checkbox" name="gift" id="check"> <br><br>
  Write your gift message here: <br>
  <textarea disabled rows="5" cols="50" name="message" id="text">Type your message here.
  </textarea>
</div>
</div>
</body>
</html>

这是javascript文件中的代码:

document.getElementById("check").addEventListener('click', function(){
    var textArea = document.getElementById("text");
    textArea.disabled = !textArea.disabled;
});

0 个答案:

没有答案