CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Neo
Neo

Reputation: 407

How do I get this code working which is intended to change the text of a button upon clicking?

I'm trying to change the text and color of a button when the user clicks it. I am trying to change the text from "Search" to "Close". I have attempted to code it, and have posted what I tried in jsfiddle.

now another problem is I can't figure out why jsfiddle isn't running the code, haha, but maybe someone can figure it out regardless of the jsfiddle glitches.

Without further ado, my code...

HTML:

<form>
  <p>

      <button class="btn submit" type="submit" onClick="changeHeight();">Search</button>


      <button class="btn cancel" onClick="changeHeight2();">Reset</button>  

      <div id="SearchDiv">Here I am</div>

    </p>
</form>

CSS

p{
  text-align:center;
  background-color: rgb(222,222,222);
}
.btn{
  margin-top:10px;
  margin-bottom:10px;
  font-size: 22px;
  color:rgb(255,255,255);
  width: 150px;
  height: 60px;
  outline: none;
  border-radius:5px;
  border:0;
}
.submit{
 background-color: rgb(44,228,191);
}
.submit:hover{
  background-color:  rgb(24, 188, 156)!important;
}
.submit:active{
   background-color: rgb(15,121,100)!important;
}
.cancel{
    background-color: rgb(244,123,130);
}
.cancel:hover{
    background-color: rgb(237,28,36)!important;
}
.cancel:active{
    background-color: rgb(154,12,19)!important;
}





#SearchDiv {
  background-color:purple;
  height:50px;
  display:none;
}

JS

function changeHeight() {
    $('#SearchDiv').fadeIn(500);

}

function changeHeight2() {
    $('#SearchDiv').fadeOut(200);

}

http://jsfiddle.net/fdkzp9dm/8/

Upvotes: 0

Views: 42

Answers (3)

Morgs
Morgs

Reputation: 1746

Change your button like:

<button class="btn submit" type="submit" onClick="changeHeight($(this), $('#SearchDiv'));">Search</button>

Change your javascript function like so:

function changeHeight(btn, div) 
{
    if (div.is(":visible") )
    {
         btn.val("Search").css("color", "#ffffff"); // Color: White

         div.fadeOut(500);
    }
    else
    {
         btn.val("Close").css("color", "#000000"); // Color: Black

         div.fadeIn(500);
    }
}

Upvotes: 1

Omri Aharon
Omri Aharon

Reputation: 17064

You have a couple of things you need to change:

  1. You need to change the fiddle from onload to No wrap in <body> as @Shaunak correctly commented.

  2. You need to pass the element if you're not selecting it in the function. So you either do onClick="changeHeight($(this))" or inside the JS function you do $(el).

  3. You need to check for el.text() == "Search" and to set using el.text("Close"), since you're checking the text inside and not a value attribute if you're doing el.value (that returns undefined for your example).

  4. The last glitch is because the button is of type submit, and whenever clicking it the request failed and it overwritten the HTML.

So, basically:

function changeHeight(el) {

    $('#SearchDiv').fadeToggle(500);  

    if (el.text()=="Search")  {

        el.text("Close");
    }
    else {

        el.text("Search");
    }
}

Fiddle

Upvotes: 2

Jcao02
Jcao02

Reputation: 804

Using thecss and the text jquery's attributes will do the work:

$(document).ready(function() {
    $('#button_id').click(function(){
        $(this).text('another text')
        $(this).css('height', '100px')
    })
})

Here's a demo

Upvotes: 1

Related Questions