Button generated inside javascript code to onclick insert value in input type text in form-CodePudding

I have a very nice SEO-keyword suggestion tool working with CKeditor, it displays the most used word in the text while writing. The problem is that I want to make these generated keywords clickable one by one. So when you click on a keyword, it auto-fills an input-type text.

Here is the HTML code:

    <!-- Textarea -->
    <div >
    <label  for="editor1">Insert your text here </label>
    <div >                     
    <textarea  id="editor1" name="editor1"><p>text example with ahöäåra</p></textarea>
    </div>
    </div>
    <!-- KW density result -->
    <div >
    <label  for="editor1">Suggested SEO keywords</label>
    <div >                     
    <div id="KWdensity" ></div>
    </div>
    </div>

Here is the javascript code:

<script type="text/javascript">
    $(document).ready(function() {
    CKEDITOR.replace('editor1');
    $(initKW);
    CKEDITOR.instances.editor1.on('contentDom', function() {
    CKEDITOR.instances.editor1.document.on('keyup', function(event) {
    $(initKW);
    });
    });
    function KeyDensityShow(srctext, MaxKeyOut, keylenMin) {
    var Output;
    var words = srctext.toLowerCase().split(/[^\p{L}\p{M}\p{N}] /u)
    var positions = new Array()
    var word_counts = new Array()
    try {
    for (var i = 0; i < words.length; i  ) {
    var word = words[i]
    if (!word || word.length < keylenMin) {
    continue
    }
    if (!positions.hasOwnProperty(word)) {
    positions[word] = word_counts.length;
    word_counts.push([word, 1]);
    } else {
    word_counts[positions[word]][1]  ;
    }}
    word_counts.sort(function(a, b) {
    return b[1] - a[1]
    })
    return word_counts.slice(0, MaxKeyOut)
    } catch (err) {
    return "";
    }}
    function removeStopWords(input) {
    var stopwords = ['test', ];
    var filtered = input.split(/\b/).filter(function(v) {
    return stopwords.indexOf(v) == -1;
    });
    stopwords.forEach(function(item) {
    var reg = new RegExp('\\W'   item   '\\W', 'gmi');
    input = input.replace(reg, " ");
    });
    return input.toString();
    }
    function initKW() {
    $('#KWdensity').html('');
    var TextGrab = CKEDITOR.instances['editor1'].getData();
    TextGrab = $(TextGrab).text();
    TextGrab = removeStopWords(TextGrab);
    TextGrab = TextGrab.replace(/\r?\n|\r/gm, " ").trim(); 
    TextGrab = TextGrab.replace(/\s\s /g, " ").trim();
    if (TextGrab != "") {
    var keyCSV = KeyDensityShow(TextGrab, 11, 3);
    var KeysArr = keyCSV.toString().split(',');
    var item, items = '';
    for (var i = 0; i < KeysArr.length; i  ) {
    item = '';
    item = item   '<b>'   KeysArr[i]   "</b></button>&nbsp;";
    i  ;
    item = '<button  type="button" onclick="document.getElementById(thebox).value="head of gwyneth paltrow";"><span >'   KeysArr[i]   "</span>&nbsp;"   item;
    items = items   item;
    }
    $('#KWdensity').html(items);
    }}});
</script>

And here is some extra HTML for the input that needs to be auto-filled.

The keywords box:

 <input type="text" id="thebox" value="" style="width:80%;height:30px;background:#000;color:#fff;"/>
    <br><input type="button" value="this one is working" onclick="document.getElementById('thebox').value='test button is working';">

So if you write something, it will generate keywords buttons. When you click on one of these buttons, the keyword must be entered in the input text like this

keyword,

Here is a Fiddle DEMO.

Any idea how to fix that? I added a document.getElementById('thebox'). but it does not return anything

CodePudding user response：

Your code in

item = '<button  type="button" onclick="document.getElementById(thebox).value="head of gwyneth paltrow";"><span >'   KeysArr[i]   "</span>&nbsp;"   item;

Will add to the DOM (in other words, to the HTML of the page), the following bit:

<button
  
  type="button"
  onclick="document.getElementById(thebox).value="head of gwyneth paltrow";"
>

Now, the resulting onclick above has some problems. First, notice that the quotes it uses in the string after .value= are actually closing the onclick declaration because they are not escaped. I mean, instead of

onclick="document.getElementById(thebox).value="head of gwyneth paltrow";"
                                               ^--- problem here       ^--- and here

It should've been

onclick="document.getElementById(thebox).value=\"head of gwyneth paltrow\";"
                                               ^--- fixed here          ^--- and here

Secondly, the argument to .getElementById(thebox) is thebox. Notice here that the way it is now, thebox is actually a variable, not a string. So instead of the above, what you want is:

onclick="document.getElementById(\"thebox\").value=\"head of gwyneth paltrow\";"
                                 ^---    ^--- fixed here

These fixes should be enough to make the clicks on the words set the "head of gwyneth paltrow" value in the textbox.

I believe, though, you want to actually set the key when the button is clicked. To do that, instead of having "head of gwyneth paltrow" after the .value, you should have the text of the key. All in all, here's how that line could be:

item = '<button  type="button" onclick="document.getElementById(\'thebox\').value=\''   key   '\';"><span >'   KeysArr[i]   "</span>&nbsp;"   item;
                                                                                              ^--     ^--       ^^^^^^^^^^^^^^--- changed here (notice in the demo below I declare the key variable before using it here)

Updated fiddle here. Running demo below as well.

$(document).ready(function() {
  CKEDITOR.replace('editor1');
  $(initKW);
  CKEDITOR.instances.editor1.on('contentDom', function() {
    CKEDITOR.instances.editor1.document.on('keyup', function(event) {
      $(initKW);
    });
  });

  function KeyDensityShow(srctext, MaxKeyOut, keylenMin) {
    var Output;
    var words = srctext.toLowerCase().split(/[^\p{L}\p{M}\p{N}] /u)
    var positions = new Array()
    var word_counts = new Array()
    try {
      for (var i = 0; i < words.length; i  ) {
        var word = words[i]
        if (!word || word.length < keylenMin) {
          continue
        }
        if (!positions.hasOwnProperty(word)) {
          positions[word] = word_counts.length;
          word_counts.push([word, 1]);
        } else {
          word_counts[positions[word]][1]  ;
        }
      }
      word_counts.sort(function(a, b) {
        return b[1] - a[1]
      })
      return word_counts.slice(0, MaxKeyOut)
    } catch (err) {
      return "";
    }
  }

  function removeStopWords(input) {
    var stopwords = ['test', ];
    var filtered = input.split(/\b/).filter(function(v) {
      return stopwords.indexOf(v) == -1;
    });
    stopwords.forEach(function(item) {
      var reg = new RegExp('\\W'   item   '\\W', 'gmi');
      input = input.replace(reg, " ");
    });
    return input.toString();
  }

  function initKW() {
    $('#KWdensity').html('');
    var TextGrab = CKEDITOR.instances['editor1'].getData();
    TextGrab = $(TextGrab).text();
    TextGrab = removeStopWords(TextGrab);
    TextGrab = TextGrab.replace(/\r?\n|\r/gm, " ").trim();
    TextGrab = TextGrab.replace(/\s\s /g, " ").trim();
    if (TextGrab != "") {
      var keyCSV = KeyDensityShow(TextGrab, 11, 3);
      var KeysArr = keyCSV.toString().split(',');
      var item, items = '';
      var previousKeys = [];
      for (var i = 0; i < KeysArr.length; i  ) {
        item = '';
        var key = KeysArr[i];
        previousKeys.push(key);
        item = item   '<b>'   key   "</b></button>&nbsp;";
        i  ;
        item = '<button  type="button" onclick="document.getElementById(\'thebox\').value=\''   previousKeys.join(', ')   '\';"><span >'   KeysArr[i]   "</span>&nbsp;"   item;
        items = items   item;
      }
      $('#KWdensity').html(items);
    }
  }
});

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="//cdn.ckeditor.com/4.6.1/standard/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Textarea -->
<div >
<label  for="editor1">Insert your text here </label>
<div >                     
<textarea  id="editor1" name="editor1"><p>text example with ahöäåra</p></textarea>
</div>
</div>
<!-- KW density result -->
<div >
<label  for="editor1">Suggested SEO keywords</label>
<div >                     
<div id="KWdensity" ></div>
</div>
</div> 



The keywords box: <input type="text" id="thebox" value="" style="width:80%;height:30px;background:#000;color:#fff;"/>
<br><input type="button" value="this one is working" onclick="document.getElementById('thebox').value='test button is working';">