CODEWITHSUNDEEP
javascript
Alan
Alan

Reputation: 135

How to target a specific element using javascript

After a CLICK on the taskYes icon, i need to get the value on the input with the inputMins class

<form method="post" action="">
    <span class="taskTitle">
        <input id="newInput" type="text" /> 
        <button class="taskYes"></button>
    </span>

    <span class="taskMinutes">
        <input class="col-md-2 inputMins" type="text" />
    </span>
</form>

Can you help me saying what is the best way to target my input?

I've tried this but ... without success :

$(".taskYes").click(function(){
    var valeurTime = $(this).parent().next("span").val();
    alert(valeurTime);
});

Upvotes: 1

Views: 459

Answers (4)

victorfern
victorfern

Reputation: 46

On my browser this code is working, please send me your result! 

<head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js">
    </script>
    <script>
        function init() {
            console.log("here");
            $(".taskYes").click(function(evt){
var value = $(evt.target).parent().next('span').find('.inputMins').val();
alert(value);
});
        }
    </script>
</head>
<body onload="init()">
<form method="post" action="">
    <span class="taskTitle">
        <input id="newInput" type="text" />
        <button class="taskYes"></button>
    </span>

    <span class="taskMinutes">
        <input class="col-md-2 inputMins" type="text" />
    </span>
</form>

</body>
</html>

Upvotes: 1

victorfern
victorfern

Reputation: 46

is more simple! Try this:

$(".taskYes").click(function(evt){
var value = $(evt.target).parent().next('span').find('.inputMins').val();
console.log(value);
});

Upvotes: 0

victorfern
victorfern

Reputation: 46

And now the full implementation:

<!DOCTYPE html>
<html>

<head>
    <script>
        function checkTaskMinutes() {
            debugger;
            alert(document.getElementsByClassName('inputMins')[0].value);
        }
    </script>
</head>

<form method="post" action="">
    <span class="taskTitle">
        <input id="newInput" type="text" />
        <button class="taskYes" onclick="checkTaskMinutes()"></button>
    </span>

    <span class="taskMinutes">
        <input class="col-md-2 inputMins" type="text" />
    </span>
</form>


</html>

Upvotes: 0

victorfern
victorfern

Reputation: 46

Are you using jQuery? Or VanillaJS?

Jquery Solution:

 $('.inputMins').val()

VanillaJS Solution:

document.getElementsByClassName('inputMins')[0].value

Upvotes: 1

Related Questions