How to add new Class to only First DIV, In this JS structure

user_14755809 0
Viewed 99

i have this text box when i add some lines from this text box then these lines added to something like this structure.

you can check this lines by Copy/Paste and insert to this textbox:

Question-1 : The color of the sky is...?

Question-2 : Paper comes from...?

Question-3 : How many hours in a day?

Question-4 : A Giraffe is a fish?

enter image description here

But now my need is that i want to add one extra class answer in only first line like this:

enter image description here

My All JS Text box Code is that:

const sendButton = document.getElementById('send-btn');
const textArea = document.getElementById('input');
const innerDiv = document.getElementById('inner');
var message = textArea.value;

sendButton.addEventListener('click', function() {
  // split the textarea entries into an array
  let lines = (textArea.value).split("\n");

  // iterate over each line, creating a div/span and inserting into the DOM
  lines.forEach( (line) => {
    let encodedLine = encodeHtmlEntity(line);
    let newElement = `<div class="quiz">${encodedLine}</div>`;
    
    innerDiv.innerHTML += newElement;
  });
  
  // reset the textarea
  textArea.value = '';

});

function encodeHtmlEntity(input) {
  var output = input.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
    return '&#' + i.charCodeAt(0) + ';';
  });

  return output;
}
<div id="inner"> </div>


<textarea class="input" id="input" placeholder="Message..."></textarea>
<button class="waves-effect waves-light" id="send-btn">add text</button>

How can i do that. plz solve my issue. What some extra lines of code i need to write ?

Thanks in Advance , Love You.

html javascript
4 Answers

If you are sure there always be, at least one "quiz" class element:

document.getElementsByClassName('quiz')[0].classList.add('answer')

The [0] represents the first element with the "quiz" class.

Note: if there is no "quiz" class element at all, then:

document.getElementsByClassName('quiz')[0] === undefined

wil be true and the line will throw an error like this:

Cannot read property 'classList' of undefined
user_15751570

Try adding an index and then using tha to conditonally add the class first

sendButton.addEventListener('click', function() {
  // split the textarea entries into an array
  let lines = (textArea.value).split("\n");

  // iterate over each line, creating a div/span and inserting into the DOM
  lines.forEach( (line,i) => {
    let encodedLine = encodeHtmlEntity(line);
    let newElement = i===0 ? 
    `<div class="quiz answer">${encodedLine}</div>` :
    `<div class="quiz">${encodedLine}</div>`
    
    innerDiv.innerHTML += newElement;
  });
  
  // reset the textarea
  textArea.value = '';

});
user_132171510

You could do something like this:

  // iterate over each line, creating a div/span and inserting into the DOM
  lines.forEach( (line, index) => {
    let encodedLine = encodeHtmlEntity(line);

    let classList = 'quiz';
    if (index === 0) {
      classList += ' answer'
    }

    let newElement = `<div class="${classList}">${encodedLine}</div>`;
    
    innerDiv.innerHTML += newElement;
  });
user_142015280 
if (document.getElementsByClassName('classYouNeedToFind')[0]) {
    document.getElementsByClassName('classYouNeedToFind')[0].classList.add('classYouNeedToAdd');
}

The if is just to avoid errors if there is no element with the class. And in jQuery

$('.classYouNeedToFind').eq(0).addClass('classYouNeedToAdd');

No if needed in jQuery.

user_70412510
Related