How to get corresponding value to a button in JavaScript?

I don’t want the value of button but instead I want the value of a span inside a div which corresponds to that button. I have a model in which buttons correspond to a div.

For example here you can see there are 3 buttons that correspond to each assignment.

Whenever a user clicks Assign button I need to return the value of the title span for example if someone clicks assign on first, it should print “English UOI 1” in the console.

The html code wraps up like this –

<div class="assignment-wrapper">
    <div class="assignment-title"><span class="assignment-name">English UOI 1</span><span>15-06-2021</span></div>
    <div class="assignment-functions">
        <div class="assign-task assignment-function-btn">Assign</div>
        <div class="update-task assignment-function-btn">Update</div>
        <div class="view-results assignment-function-btn">Results</div>
    </div>
</div>

Now this is the example for structure but I would be doing this using javascript, I have retrieved data for database an I need to present each assignment in a table form.

If you have a better model you can suggest changes. Any help is appreciated.

Answer

You can target up the element tree 2 parents and then back down two children and get the spans textContent.

const btn = document.querySelectorAll('.assignment-function-btn')

function getValue(e){
  let target = e.target.parentNode.parentNode.children[0].children[0]
  console.log(target.textContent)
}

btn.forEach(button => {
  button.addEventListener('click', getValue)
})

.row {
  display: flex;
  justify-content: space-around;
}

.assignment-function-btn {
  background: #ddd;
  border: 1px solid black;
  border-radius: 5px;
  margin-left: 5px;
  padding: 3px;
  cursor: pointer;
}

  <div class="assignment-wrapper row">
    <div class="assignment-title">
       <span class="assignment-name">English UOI 1</span>    
       <span>15-06-2021</span>
    </div>
    <div class="assignment-functions row">
        <div class="assign-task assignment-function-btn">Assign</div>
        <div class="update-task assignment-function-btn">Update</div>
        <div class="view-results assignment-function-btn">Results</div>
    </div>
</div>

or…

If each of these classes per say, has its own line with the three buttons for each title/class, you could code a dataset attribute into the buttons parent element that represents the title/class that button is being used for. See my second snippit for that example…

Using dataset attribute:

In your HTML you add a data attribute like data-class-name="English UOI 1" to the direct parent element of your buttons. Then use the event target + parentNode to get the e.target.parentNode.dataset.className.

className is javascript camel-case for class-name.

    <div class="assignment-title">
      <span class="assignment-name">English UOI 1</span>
      <span>15-06-2021</span>
    </div>
    <!--/ Here we add the data attribute data-class-name="English UOI 1" /-->
    <div data-class-name="English UOI 1" class="assignment-functions row">
      <div class="assign-task assignment-function-btn">Assign</div>
      <div class="update-task assignment-function-btn">Update</div>
      <div class="view-results assignment-function-btn">Results</div>
    </div>

const btn = document.querySelectorAll('.assignment-function-btn')

function getValue(e) {
  let target = e.target.parentNode
  console.log(target.dataset.className)
}

btn.forEach(button => {
  button.addEventListener('click', getValue)
})

.row {
  display: flex;
  justify-content: space-around;
}

.assignment-title {
  flex: auto;
}

.assignment-function-btn {
  background: #ddd;
  border: 1px solid black;
  border-radius: 5px;
  margin-left: 5px;
  padding: 3px;
  cursor: pointer;
}

<div class="assignment-wrapper">
  <div class="row">
    <div class="assignment-title">
      <span class="assignment-name">English UOI 1</span>
      <span>15-06-2021</span>
    </div>
    <div data-class-name="English UOI 1" class="assignment-functions row">
      <div class="assign-task assignment-function-btn">Assign</div>
      <div class="update-task assignment-function-btn">Update</div>
      <div class="view-results assignment-function-btn">Results</div>
    </div>
  </div>
  <div class="row">
    <div class="assignment-title">
      <span class="assignment-name">Social Sciences</span>
      <span>23-06-2021</span>
    </div>
    <div data-class-name="Social Sciences" class="assignment-functions row">
      <div class="assign-task assignment-function-btn">Assign</div>
      <div class="update-task assignment-function-btn">Update</div>
      <div class="view-results assignment-function-btn">Results</div>
    </div>
  </div>
  <div class="row">
    <div class="assignment-title">
      <span class="assignment-name">Concepts of Algebra</span>
      <span>26-06-2021</span>
    </div>
    <div data-class-name="Concepts of Algebra" class="assignment-functions row">
      <div class="assign-task assignment-function-btn">Assign</div>
      <div class="update-task assignment-function-btn">Update</div>
      <div class="view-results assignment-function-btn">Results</div>
    </div>
  </div>
</div>