CODEWITHSUNDEEP
javascript
abrahamlinkedin
abrahamlinkedin

Reputation: 467

click function for each designated class item

I have a function that is supposed to correspond with each li. With plain JavaScript, I would like to know how to replace the HTML on listitem to whatever the user has input.

I would like only the function that is clicked to run, and only for the appropriate row (in this case, li). 

function day(el){
var listitem = document.getElementsByClassName('listitem');
var changebox = document.getElementsByClassName('changebox');

listitem[el].innerHTML = changebox[el].value;
}
ul li {list-style-type: none;}
.changebox {width: 40px;}
<ul>
<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

</ul>

Upvotes: 0

Views: 87

Answers (3)

Geeky
Geeky

Reputation: 7488

It is not considered a good practice to mix your javascript and mark up. you may consider separating them. Here is the working code for your example 

$(document).ready(function() {

  $(".listcontainer button").bind('click', day);
});

function day(event) {
  var targetElement = event.target;
  var $targetObject = $(targetElement);
  var siblings = $targetObject.siblings();
  var listitem = siblings.filter('.listitem');
  var changebox = siblings.filter('.changebox');
  $(listitem).html($(changebox).val())
}
ul li {
  list-style-type: none;
}
.changebox {
  width: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="listcontainer">
  <li>
    <span class="listitem">Item 1</span>
    <input type="text" class="changebox" />
    <button class="button">Edit</button>
  </li>

  <li>
    <span class="listitem">Item 1</span>
    <input type="text" class="changebox" />
    <button class="button">Edit</button>
  </li>
</ul>

Upvotes: 1

Luke Kot-Zaniewski
Luke Kot-Zaniewski

Reputation: 1161

This replaces the entire line item, I didn't know if you wanted the changebox to stay or not and used the slightly less verbose queryselector instead of getElementByClassName.

function day(el){
var parent = el.parentNode;
var changebox = parent.querySelector('.changebox')
var listitem = parent.querySelector('.listitem')

listitem.innerHTML = "Item " + changebox.value;
}
ul li {list-style-type: none;}
.changebox {width: 40px;}
<ul>
<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

</ul>

Upvotes: 1

DominicValenciana
DominicValenciana

Reputation: 1731

Here is the way I decided to implement your day function. el is not an index but the element it self. So I used that to find the parentNode which is the li tag containing it. Then from there searched for the first occurrence of the classes you specified for the values. 

function day(el){

   var parent = el.parentNode;
   var listitem = parent.getElementsByClassName('listitem')[0];
   var changebox = parent.getElementsByClassName('changebox')[0];

   listitem.innerHTML = changebox.value;
}
ul li {list-style-type: none;}
.changebox {width: 40px;}
<ul>
<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

</ul>

Upvotes: 1

Related Questions