CODEWITHSUNDEEP
javascriptthisalt
dadiletta
dadiletta

Reputation: 299

Accessing a button's alt text using jQuery

I have two buttons with the same ID but with different text in the alt property. When the buttons are clicked, I need that button's alt text to load in the textbox. I am currently only getting "undefined"

$(document).ready(function() {
  $('button').on('click', function() {
    var sentence = $('button').prop('alt');
    var text = $('#the_box');
    text.val(text.val() + sentence + ' ');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <h5 style="text-align:center;">
        The buttons have alt="" text that needs to be added to the contents of the textbox when pressed.
      </h5>
      <div style="box-shadow:2px 2px 5px black; min-height:200px; padding:25px; margin:10px;">
        <textarea id="the_box" class="form-control" rows="3"></textarea>
        <button class="btn" id="hotlink" alt="I am very concerned.">Concerned</button>

        <button class="btn" id="hotlink" alt="I am very happy.">Happy</button>
      </div>
    </div>

  </div>

</div>

Link to problem on JS fiddle

Upvotes: 0

Views: 1407

Answers (3)

Rohan Shewale
Rohan Shewale

Reputation: 158

You should use ID for unique identification of the element throughout the HTML page. To access the alt attribute better use attr() function, prop() is used to retrieve property values (eg. checked status of checkbox)

change you HTML code

    <button class="btn hotlink" alt="I am very concerned.">Concerned</button>

    <button class="btn hotlink" alt="I am very happy.">Happy</button>

So, your script will be

$(document).ready(function() {
 $('document').on('click', '.hotlink', function() {
   var sentence = $(this).attr('alt');
   var text = $('#the_box');
   text.val(text.val() +' '+ sentence + ' ');
 });
});

Upvotes: 0

CaptainHere
CaptainHere

Reputation: 688

You want to have unique ids for the buttons and access the clicked button with $(this). Also alt is a HTML attribute

$(document).ready(function() {
  $('button').on('click', function() {
    var sentence = $(this).attr('alt');
    var text = $('#the_box');
    text.val(text.val() + sentence + ' ');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <h5 style="text-align:center;">
        The buttons have alt="" text that needs to be added to the contents of the textbox when pressed.
      </h5>
      <div style="box-shadow:2px 2px 5px black; min-height:200px; padding:25px; margin:10px;">
        <textarea id="the_box" class="form-control" rows="3"></textarea>
        <button class="btn" id="hotlinkConcerned" alt="I am very concerned.">Concerned</button>

        <button class="btn" id="hotlinkHappy" alt="I am very happy.">Happy</button>
      </div>
    </div>

  </div>

</div>

Upvotes: 0

Simon Mo
Simon Mo

Reputation: 773

Try this, you need to use the attr function instead of prop and $(this) instead of $('button')

$(document).ready(function() {
  $('button').on('click', function(e) {
    var sentence = $(this).attr('alt');
    var text = $('#the_box');
    text.val(text.val() + sentence + ' ');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <h5 style="text-align:center;">
        The buttons have alt="" text that needs to be added to the contents of the textbox when pressed.
      </h5>
      <div style="box-shadow:2px 2px 5px black; min-height:200px; padding:25px; margin:10px;">
        <textarea id="the_box" class="form-control" rows="3"></textarea>
        <button class="btn" id="hotlink" alt="I am very concerned.">Concerned</button>

        <button class="btn" id="hotlink" alt="I am very happy.">Happy</button>
      </div>
    </div>

  </div>

</div>

Upvotes: 3

Related Questions