Replace onclick in HTML directly into JavaScript

Question

My code works as I want, but I'm trying to make it work with dynamic DIV IDs:

$(function() {
  var contents = $('#term1').text().split(' '),
    modText = '';

  for (var i = 0; i < contents.length; i++) {
    modText += '<span>' + contents[i] + '</span> ';
  }

  $('#term1').html(modText);

  $('#term1').click(function(e) {
    $(e.target).toggleClass('underline');
  });

  $('#button1').click(function() {
    var selected = [];
    $('span.underline').each(function() {
      selected.push($(this).text());
    });
    alert('Selected: ' + selected.join(','));
  });
});

span.underline {
  text-decoration: underline;
  color: blue;
}

span {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="term1">Lorem ipsum dolor sit amet</span>
<button type="button" id="button1">Submit</button>

This is the HTML now:

<span id="term1">Lorem ipsum dolor sit amet</span>
<button type="button" id="button1">Submit</button>

How to make my function take dynamic IDs in span and button like this:

<span id="term1">Lorem ipsum dolor sit amet</span>
<button type="button" id="button1">Submit</button>
<span id="term2">Lorem ipsum dolor sit amet</span>
<button type="button" id="button2">Submit</button>
<span id="term3">Lorem ipsum dolor sit amet</span>
<button type="button" id="button3">Submit</button>

I'm not used to using functions this way. I would appreciate any documentation or a working code that will help me understand how to do it.

Thank you in advance,
Barb

EDIT: How the scripts works. You run the script, you click a word or many words that get underlined and click the button to have an alert with the words you've clicked.

Can you just wrap all the buttons in a div or fieldset and use a child selector instead of the ID? It's hard to tell from a contrived sample. — Paul
– Paul, Commented Jul 17, 2018 at 4:11
It's already hooked up to take multiple IDs; just run .html(modText) against the IDs you want: $('#term2').html(modText);. — Obsidian Age
– Obsidian Age, Commented Jul 17, 2018 at 4:14
Yes, @ObsidianAge it will work, but my ID's are generated dynamically, and I can have thousands. In this case, I would have to have a for before the function to handle the IDs and I'm not sure if it's a good way to code — Creek Barbara
– Creek Barbara, Commented Jul 17, 2018 at 4:20
@Paul I have no idea what you are talking about. I'm a pretty newbie to Javascript and jQuery world. I'm learning by working on projects as this is the only way I learn. — Creek Barbara
– Creek Barbara, Commented Jul 17, 2018 at 4:26

NullPointer · Accepted Answer · 2018-07-17 05:23:30Z

2

You can achieve this using querySelectorAll

Step-1. Get all button using querySelectorAll.

Step-2. Bind click event on all buttons.

Step-3. Get previousElementSibling to get span value.

try this

var buttons = document.querySelectorAll('button');
var spans = document.querySelectorAll('span');

for (var i=0; i<spans.length; ++i) {
    var contents = spans[i].innerHTML.split(' '),
    modText = '';
       for (var j = 0; j < contents.length; j++) {
          modText += '<span>' + contents[j] + '</span> ';
       }
  spans[i].innerHTML=modText;
  spans[i].addEventListener('click', clickFuncSpan);
}

for (var i=0; i<buttons.length; ++i) {
  buttons[i].addEventListener('click', clickFunc);
}

function clickFunc() {
 var selected = [];
 // alert(this.id); 
 // alert(this.previousElementSibling.innerHTML);
$(this.previousElementSibling).find("span").map(function(){
     if($(this).hasClass( "underline" )){
          selected.push($(this).html());
     }
})
  console.log(selected.join(','));
}

function clickFuncSpan(e) {
 e.target.classList.add("underline");
}

span.underline {
  text-decoration: underline;
  color: blue;
}

span {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <span id="term1">Lorem ipsum dolor sit ame1t</span>
<button type="button" id="button1">Submit</button>
</br>
<span id="term2">Lorem ipsum dolor sit amet2</span>
<button type="button" id="button2">Submit</button>
</br>
<span id="term3">Lorem ipsum dolor sit amet3</span>
<button type="button" id="button3">Submit</button>
</body>

edited Jul 17, 2018 at 5:23

answered Jul 17, 2018 at 4:36

NullPointer

7,3885 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Creek Barbara Over a year ago

Thank your time. The code is not working as I want. When you select a word in the span it should be underlined and when the button gets clicked you have an alert with the words you've selected.

Creek Barbara Over a year ago

Just a correction: not select the word, but click on the word. Test my initial code understand how it works.

Collectives™ on Stack Overflow

Replace onclick in HTML directly into JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related