All geek questions in one place

JQuery, button message does not change


How to get the text next to my button for change? Everything else works fine except for these button messages. Thank you for your help.

<!DOCTYPE html PUBLIC "><head>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type='text/javascript'>
  var fontSizes = [14, 16]
$(function(){
  $('#PlusMinus').click(function() {
      if($(this).val() == "+") {
      $('#OurText').css('fontSize', fontSizes[1] + 'pt');
      $(this).val("-");
      }else {
        $('#OurText').css('fontSize', fontSizes[0]+ 'pt');
        $(this).val("+");
      }
   });
});       
<!--NOT WORKING-->
    $("button").click(function () {
    $("h6").toggle();
    });
</script>
</head>
<!--NOT WORKING-->
    <h6>
      <input type='button' value='+' id='PlusMinus'/>
        Larger Text</h6>
    <h6 style="display: none">Smaller Text</h6>
<!--TEXT RESIZES-->
<p id="OurText">My Text!!!</p>
</body>
</html>

BUTTON STATE 'Message must switch between larger text and smaller text'

[+] Larger Text

[-] Smaller Text
+3
source share
4 answers

This worked for me:

<!DOCTYPE html PUBLIC "><html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
var fontSizes = [14, 16]
$(function(){
$('#PlusMinus').click(function() {
    if($(this).val() == "+") {
        $('#OurText').css('fontSize', fontSizes[1] + 'pt');
        $(this).val("-");
    }else {
        $('#OurText').css('fontSize', fontSizes[0]+ 'pt');
        $(this).val("+");
    }
    $("body h6").toggle();
});
});
</script>
</head>
<input type='button' value='+' id='PlusMinus'/>
<h6>Larger Text</h6>
<h6 style="display: none">Smaller Text</h6>
<!--TEXT RESIZES-->
<p id="OurText">My Text!!!</p>
</body>
</html>

The changes I made were:

changed $ ("h6"). toggle (); up to $ ("body h6"). toggle (); and moved it to $ ('# PlusMinus'). Press function

moved the button from the h6 element "Larger Text"

html> above

deleted comments "Does not work";)

+1
source

instead

$(this).val("-");

use

$(this).attr('value','+');
+1
source

html

<input type='button' value='+' id='PlusMinus'/>
    <h6>Larger Text</h6>
    <h6 style="display:none" >Smaller Text</h6>

jquery

 $("input[type=button]").click(function () {
    if($(this).val() == '-')
       $(this).val("+");
    else $(this).val("-");
    $("h6").toggle();
    });

});

.

+1

One problem is that you have:

$("button").click(function (){});

... but your HTML shows:

<input type="button" id="PlusMinus" />

You do not want to select an item button. You want a inputbutton element type. Try the following:

$(':button').click( function(){} );

... assuming that you will not select a button by its identifier. Note that this can select more than one item, so an ID approach (or some other ways to uniquely identify the button you are referring to) would be preferable:

$('#PlusMinus').click( function(){} );
+1
source

Source: https://habr.com/ru/post/1796739/

More articles:


All Articles