Javascript & jquery | I want to get the text in the <span> tag outside the button the user clicked on

Question

Web site picture

Hello I want to get a val in span with on click event but I must use one event for this.

What am I trying to do basicly if user click PAY button inside in second div I should get

.faturatarih value witch is "09-05-2021 10:22" in second div but

if user click PAY button in first div I should get "09-05-2021 08:22"

sorry for my bad english

Here is my HTML code

<div class="fatura">
    <span class="faturaTarih">09-05-2021 08:22</span>
    <button type="button" class="faturaOdeButton">PAY</button>
    <p class="faturaGonderenIsım">Mr. Jack</p>
    <span class="faturaAciklama">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae, minus provident.</span>
    <span class="faturaDurum">Waiting</span><span class="faturaUcret">$500,00</span>
</div>
<div class="fatura">
    <span class="faturaTarih">09-05-2021 10:22</span>
    <button type="button" class="faturaOdeButton">PAY</button>
    <p class="faturaGonderenIsım">Mr. Tom</p>
    <span class="faturaAciklama">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae, minus provident.</span>
    <span class="faturaDurum">Waiting</span><span class="faturaUcret">$1000,00</span>
</div>

Answer 1

you can try this:

$(".faturaOdeButton").on("click", function()
{

// Get date
 var date = $(this).closest(".fatura").find(".faturaTarih").text();
 
 // For test
 alert(date)
 
})

Answer 2

You can use a javascript function that uses the event parameter to reference its elements. Replace all of your <button type="button" class="faturaOdeButton">PAY</button> with <button type="button" class="faturaOdeButton" onclick="pay(event)">PAY</button> (or just simply add the onclick attribute. Then, in your JavaScript, you can define the function:

function pay(e){
    var value = e.target.parentElement.querySelector(".faturaTarih").textContent;
    console.log(value);
}

The above code will receive the event parameter, then find the target, or the element the "ping" was sent from. Then, it will get its parent element and find all of the elements inside it with the class list of faturaTarih(which should only be one). It will get the textContent of that element and display it in the console.

Answer 3

function getData(clicked_id){

 let id = clicked_id;

if(id == "button1")
{
let value = document.getElementsByClassName("faturaTarih")[0].innerText;
console.log(value)
}

if(id == "button2")
{
let value = document.getElementsByClassName("faturaTarih")[1].innerText;
console.log(value)
}

}

 <div class="fatura">
                    <span class="faturaTarih">09-05-2021 08:22</span>
                    <button type="button" class="faturaOdeButton">PAY</button>
                    <p class="faturaGonderenIsım">Mr. Jack</p>
                    <span class="faturaAciklama">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae, minus provident.</span>
                    <span class="faturaDurum">Waiting</span><span class="faturaUcret">$500,00</span>
                </div>
                <div class="fatura">
                    <span class="faturaTarih">09-05-2021 10:22</span>
                    <button type="button" class="faturaOdeButton">PAY</button>
                    <p class="faturaGonderenIsım">Mr. Tom</p>
                    <span class="faturaAciklama">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae, minus provident.</span>
                    <span class="faturaDurum">Waiting</span><span class="faturaUcret">$1000,00</span>
                </div>