单击时附加元素

Append Element on Click

本文关键字：元素 单击      更新时间：2024-03-23

[已解决]

Codecademy无法使用我的脚本


我在网上查找了这个问题，我将代码与其他运行良好的代码进行了比较，但我所做的一切都不起作用。

我想要完成的是创建一个div，当用户按下提交按钮时，在文本区域中添加文本。我现在不需要干净的表单，也不需要xss保护措施，我只需要在用户按下按钮时添加一个div。

代码：

HTML.index

<body>
<div id="page-background">
    <div id="page-footer">
        <textarea id="input-box"rows='4' cols='24' placeholder='Input Text Here'></textarea>
        <button id='input-button'>Submit</button>
    </div>
</div>
</body>

Script.js

$(document).ready(function(){
    $('#input-button').click(function(){
        var userInput = $('#input-box').val();
        $('#input-box').val('');
        $('#page-background').append('<div>' + userInput + '</div>');
    });
});

网站：http://www.codecademy.com/JamesTill/codebits/DbczHl/edit

jQuery

请确保在<head>标记中或在关闭</body>标记之前链接到jQuery。

<head>
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
</head>
<body>
  <div id="page-background">
      <div id="page-footer">
          <textarea id="input-box"rows='4' cols='24' placeholder='Input Text Here'></textarea>
          <button id='input-button'>Submit</button>
      </div>
  </div>
</body>

JavaScript

var button = document.getElementById('input-button')
var pageBackground = document.getElementById('page-background')
var inputDiv = document.createElement('div')
button.addEventListener('click', function (event) {
    event.preventDefault()
    var userInput = document.getElementById('input-box').value
    inputDiv.textContent = userInput
    pageBackground.appendChild(inputDiv)
})

看起来codecademy工作不正常，但无论如何，这是一种在没有jQuery的情况下获得相同效果的方法。

相关文章：