CODEWITHSUNDEEP
javascriptjquery
სალი სულაბერიძე
სალი სულაბერიძე

Reputation: 233

How to append numbers to relevant string JS

I want to add relevant indexed strings from array to numbers in div. Can someone help me please?

For example I want to append "one" from array to 1 in div.

I want result:

1one
2two
3three
4four
5five

let array = [one, two, three, four, five]

$('button).click(function(){
//div append array
})

<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
<button></button>

Upvotes: 0

Views: 108

Answers (3)

mplungjan
mplungjan

Reputation: 177685

First fix your syntax errors. Missing quote on $('button) for example and missing quotes on the array elements

Then add a function to the .html

If the order of the array matches the order of the .test items, this is the simplest code

let array = ["one", "two", "three", "four", "five"]
$(function() { // on page load 
  $('button').on("click", function(e) {
    e.preventDefault(); // just in case the button is in a form and not type=button
    $(".test").html(function(i) { // using function to get at $(this)
      return $(this).text() + array[i]; // or this.textContent+array[i] or $(this).html()+`<b>${array[i]}</b>` etc
    })
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
<button>Click</button>

Vanilla JS

let array = ["one", "two", "three", "four", "five"]

window.addEventListener("load", () => { // on page load
  document.querySelector('button').addEventListener("click", (e) => {
    e.preventDefault(); // just in case the button is inside a form
    // [...document.querySelectorAll(".test")].forEach((ele, i) => ele.textContent += array[i]); // for recent older browsers like Edge<v17
    document.querySelectorAll(".test").forEach((ele, i) => ele.textContent += array[i])

  });
});
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
<button>Click</button>

Upvotes: 1

Wimanicesir
Wimanicesir

Reputation: 5121

You can loop all elements with each. Use the index of the loop to append the correct word.

let array = ['one', 'two', 'three', 'four', 'five']

$('button').click(function(){
   // Check every element with the class test
   $('.test').each(function(e){
    // Append current index of array
    $($('.test')[e]).append(array[e])
   });
 })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
<button>Click</button>

Upvotes: 0

Terry
Terry

Reputation: 66093

You don't need jQuery for this. In your click event handler callback, you simply iterate through all elements that match the .test selector, and then set their innerText to include the corresponding string from array, accessed by index:

let array = ['one', 'two', 'three', 'four', 'five'];

document.querySelector('button').addEventListener('click', () => {
  document.querySelectorAll('.test').forEach((el, i) => {
    el.innerText += array[i];
  });
});
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
<button>Add</button>

Upvotes: 0

Related Questions