CODEWITHSUNDEEP
javascripthtmljqueryelement
scrummy
scrummy

Reputation: 795

JavaScript get multiple element's text values

I want to make that when the user clicks onto the bordered container, the 'Name' text should show the container's name only and the 'Subject' text should show the container's subject only, but this code shows all the elements inside the container for the 'Name' and the 'Subject' too. I mean there are two elements inside one container. One with class 'name' and one with the class 'subject'. When I click onto the bordered container I want to get the 'name' text's and write it into the element with the class resname. And the same thing with the subject. Any idea how to solve it?

var name = document.querySelectorAll('.name');
var gname = $('.resname');
var gsub = $('.ressubject');

$('.container').click(function() {

  gname.text($(this).text());
  gsub.text($(this).text());
});
.container {
border: 1px solid red;
cursor: pointer;
padding: 5px;
}

.resname, .ressubject {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    <span class="name">firstname</span>
  </div>
  <div class="body">
    <span class="subject">firstsubject</span>
  </div>
</div>
<br>
<div class="container">
  <div class="header">
    <span class="name">secondname</span>
  </div>
  <div class="body">
    <span class="subject">secondsubject</span>
  </div>
</div>
<hr><br>
<div class="result">
  <span>Name: <span class="resname"></span></span><br>
  <span>Subject: <span class="ressubject"></span></span>
</div>

Upvotes: 0

Views: 439

Answers (1)

meine
meine

Reputation: 270

is that what you want?

const container = document.querySelector('.container');
const output = document.querySelector('.output');
const outputItemName = output.querySelector('.output-item > span[data-name]');
const outputItemSubject = output.querySelector('.output-item > span[data-subject]');

container.addEventListener('click', (e) => {
  const containerItem = e.target.closest('.container-item');

  if (!containerItem) return;

  const { name, subject } = containerItem.dataset;

  outputItemName.innerText = name;
  outputItemSubject.innerText = subject;
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container-inner>* {
  margin-bottom: 16px;
}

.container-inner>*:last-of-type {
  margin-bottom: 0;
}

.container-item {
  padding: 8px;
  border: 1px solid black;
  cursor: pointer;
}

.output {
  margin-top: 16px;
}
<div class="container">
  <div class="container-inner">
    <div class="container-item" data-name="First name" data-subject="First subject">
      <div class="container-item-name">First name</div>
      <div class="container-item-subject">First subject</div>
    </div>

    <div class="container-item" data-name="Second name" data-subject="Second subject">
      <div class="container-item-name">Second name</div>
      <div class="container-item-subject">Second subject</div>
    </div>
  </div>
</div>

<div class="output">
  <div class="output-inner">
    <div class="output-item">
      <span>Name:</span>
      <span data-name></span>
    </div>

    <div class="output-item">
      <span>Subject:</span>
      <span data-subject></span>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions