Question

我有这段代码，使用户可以向文本区域添加关键字列表，然后提交。该列表将显示在div上，然后用户必须在一行中选择一个或多个单词才能将其添加到 id =“ out” 。
到目前为止，该代码正在运行，但这不是我想要的，因此我被阻止了。我想要的是用户可以单击（而不是选择）一个或多个单词加下划线，然后单击图像以将它们作为一行添加到 id =“ out” 。
我很难解决这个问题，因为我的JS知识非常有限，但是我希望通过从事类似的项目来快速学习，并且我有很多想法。

谢谢

代码：

var arraySearchTerms = [];

function add() {
  arraySearchTerms = document.getElementById("searchTerms").value.split('\n');
  let newKeywordHtmlStr = '';
  for (var i = 0; i < arraySearchTerms.length; i++) {
    newKeywordHtmlStr += '<div style="padding: 6px;border-bottom: #b5aeae; border-bottom-style: solid;border-bottom-width: 1px;"><span id="term' + i + '">' + arraySearchTerms[i] + "</span><span style='float: right;'><img src='Red_Cross.png' height='15' width='11'/></span></div>";
  }
  document.getElementById("keywords").innerHTML += newKeywordHtmlStr;
}


function get_selection() {
  var txt = '';  
  if (window.getSelection) {
    txt = window.getSelection().toString();
  } else if (document.selection) {
    txt = document.selection.createRange().keywords;
  }
  document.getElementById("out").innerHTML += txt;
}

<TITLE>Test</TITLE>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="negative.css">

<div id="container">
  <div id="container2">
    Add your search terms:
    <textarea type="text" id="searchTerms">
    </textarea> <br />
    <button onclick="add()">Add >></button><br />
    <br /><br /> Negative keywords:
    <textarea type="text" id="out"></textarea>
  </div>

  <div id="container1">
    Search terms:
    <div id="keywords" onclick="get_selection()"></div>
  </div>
</div>

<script src="negative.js"></script>

如何在onclick下划线并添加到textarea

0 个答案: