Javascript list with clickable elements

Question

I am working on a script that would generate random list of 100 elements where every third element would be clickable. So far I am stuck at stage below. Any ideas how to progress?

var hundred = Array(100);
hundred.toString();

for (i = 0; i < hundred.length; i++) {
  document.write("Item " + (i + 1) + " of" + hundred.length + "</br>")
}

Instead of using `document.write`, use `document.createElement` to create an element and assign them event listener and append these elements to an element in html or `document.body` — Rajesh, Jun 09 '17 at 11:06

Yordan Nikolov · Answer 1 · 2017-06-09T11:18:38.250

0

Edited: full example

var hundred = Array(100);
var node;
hundred.toString();

for (i = 0; i < hundred.length; i++) {
  if(i%3===0 && i!==0){
  node = document.createElement("button");
  node.addEventListener('click', function() { alert('clicked'); });
  node.innerHTML = 'clickablke';
  } else {
  node = document.createElement("div");
  node.innerHTML = 'just div';
  }

  document.body.appendChild(node);
}

edited Jun 09 '17 at 11:18

answered Jun 09 '17 at 11:07

Yordan Nikolov

2,392
10
14

1

*every third element would be clickable*? – Rajesh Jun 09 '17 at 11:10
And how is it clickable? ;) – epascarello Jun 09 '17 at 11:10
Every third element would go bold after clicking. – Jun 09 '17 at 11:14

Dinesh undefined · Answer 2 · 2017-06-09T11:18:34.613

0

I used buttons. every third element will be clickable. remaining elements will have disabled property

var hundred = Array(100);
hundred.toString();
for (i = 0; i < hundred.length; i++) {
 
  if(i%3===0 && i!==0){
    var button = document.createElement("button");
    button.innerHTML ="Click "+i ;
  
    document.getElementsByTagName('body')[0].appendChild(button);
    
  }else{
      var button = document.createElement("button");
    button.innerHTML ="Click "+i ;
   button.disabled = true;
    document.getElementsByTagName('body')[0].appendChild(button);
    
    
    
  }
}

edited Jun 09 '17 at 11:18

answered Jun 09 '17 at 11:14

Dinesh undefined

5,216
2
14
37

@rajesh jquery removed – Dinesh undefined Jun 09 '17 at 11:19

Rajesh · Answer 3 · 2017-06-09T11:32:25.897

0

As commented,

Instead of using document.write, use document.createElement to create an element and assign them event listener and append these elements to an element in html or document.body

var hundred = Array(100);
for (i = 0; i < hundred.length; i++) {
  let el = document.createElement('span');
  el.textContent = i + " ";
  if((i+1) % 3 === 0){
    el.classList.add('clickable')
    el.addEventListener("click", notify)
  }
  document.body.appendChild(el)
}

function notify(){
  this.classList.add('clicked')
  console.log(this.textContent)
}

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

.clicked{
  color: gray;
}

References

edited Jun 09 '17 at 11:32

answered Jun 09 '17 at 11:17

Rajesh

21,405
5
35
66

and how would I go with changing look of every third element after clicking. So when the script loads all elements look all the same. After clicking every third it goes bold underlined etc.? – Jun 09 '17 at 11:27
Thanks! I see it now. – Jun 09 '17 at 11:30
@Kobiasz24 Please check the update – Rajesh Jun 09 '17 at 11:32

prasanth · Answer 4 · 2017-06-09T11:29:16.547

0

First you need create the element. Then apply the onclick with this consition i%3 == 0 to every 3 rd element

Updated

after click its a bolder using classList.add()

for (i = 1; i < 10; i++) {
  var s = document.createElement('SPAN');
  if (i % 3 == 0) {
    s.className = 'clickable';
    s.onclick = clicks;
  }
  s.textContent=i;
  document.body.appendChild(s)
}

function clicks() {
  console.log(this.innerHTML)
  this.classList.add('bold')
}

.clickable {
  color: red;
}
.bold{
font-weight:bolder;
}

edited Jun 09 '17 at 11:29

answered Jun 09 '17 at 11:19

prasanth

19,775
3
25
48

Just a pointer, if you are using `.innerHTML=`, do not update it in loop. Create a big HTML string and perform bulk operation. – Rajesh Jun 09 '17 at 11:21
@Rajesh I was just use with showing the element with that. – prasanth Jun 09 '17 at 11:22
and how would I go with changing look of every third element after clicking. So when the script loads all elements look all the same. After clicking every third it goes bold underlined etc.? – Jun 09 '17 at 11:27
see the Updated answer @Kobiasz24\ – prasanth Jun 09 '17 at 11:31

Piotr Adam Milewski · Answer 5 · 2017-06-09T11:40:11.617

Multiple wayst to do this, i'd make an event listener to every item reference, hence: every third clickable element goes bold:

 var hundred = Array(100);
hundred.toString();
var btn = Array(100);
for (i = 0; i < hundred.length+1; i++) {
  btn = document.createElement("p");
  btn.innerHTML="Item " + (i-1 + 1) + " of" +   hundred.length + "</br>";

  if(i%3===0 && i!==0){
  btn.addEventListener('click', function() { 
this.style.fontWeight = 'bold'; }, false);


  }
    document.body.appendChild(btn);                    
}

Javascript list with clickable elements

5 Answers5

References