CODEWITHSUNDEEP
javascriptjquery
Creek Barbara
Creek Barbara

Reputation: 647

Replace onclick in HTML directly into JavaScript

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.

Upvotes: 2

Views: 106

Answers (1)

NullPointer
NullPointer

Reputation: 7368

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>

Upvotes: 2

Related Questions