点击功能在课堂上不起作用答案

【问题标题】：click function not working on class点击功能在课堂上不起作用
【发布时间】：2018-02-28 05:14:24
【问题描述】：

我想在文本区域中从用户那里获取输入，然后在数组中解析这些句子，然后使每个句子都可以点击，以便将点击的句子复制到另一个文本框中。因此，为了实现这一点，我尝试在文本区域中创建跨度元素，每个跨度都有类句子，以便在单击时将该句子复制到另一个文本区域。但是innerHTML 不会产生跨度。相反，它以字符串的形式将其清楚地写入文本区域。

document.getElementById("go").onclick = function() {
  var lines = $('#input').val().split(".");

  for (var i = 0; i < lines.length; i++) {

    var line = lines[i];

    var para = document.getElementById("output");
    var htmlButton = ' <span class="sentence">' + line + "</span>";

    para.innerHTML = para.innerHTML + htmlButton;
  }
};



$('.sentence').click(function(e) {
  console.log("%00");
  var sentence = $(this).text();
  $('#textplace').html(sentence);
});

#input {
  height: 150px;
  font-family: "Courier New", Courier, monospace;
}

.sentence {
  font-family: "Courier New", Courier, monospace;
}

body {
  margin: 25px;
}

<html>

<head>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>




</head>


<body>

  <div class="alert alert-info" role="alert">Enter multiple lines of things here and it will be converted to a Javascript array format.</div>
  <textarea id="input" class="u-full-width" placeholder=""></textarea>
  <div id="output"></div>
  <input id="go" class="button-primary" type="submit" value="Go!">

  <textarea id="textplace"></textarea>
</body>

</html>

将textarea改为除法后，innerHTML可以工作，但是class语句的点击功能不起作用。

【问题讨论】：

您需要具体说明您的问题。 \post 代码不起作用，那么我们会看到你做错了什么。此类问题往往带有偏见，这在 StackOverflow 论坛中是错误的。
我相应地更改了我的问题，请立即查看。
问题已解决。感谢您考虑我的问题。

标签： javascript jquery html css

【解决方案1】：

在第 7 行你做了一个错误的改变

//para.innerHTMl
para.value

为什么是因为您试图访问属性值不是 innerHTML 的 textarea 元素来获取数据。您可以将 innerHTML 用于“div”、“p”标签等。

【讨论】：

我尝试使用除法而不是 textarea 并且 innerHTML 工作，但是 para.value 将响应作为 textarea 的 para.innerHTML 给出。