Change height with javascript

Question

Change height with javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

Good afternoon!

Next, I have a div.minhaDiv with a height: 580px; and I want it to click on a button height of that div.minhaDiv increase to 1600px .

When it is with height: 1600px I want it to click on the same button height to return to 580px ;

Follow HTML

<div class="minhaDiv">
...
</div>
<button onclick="verMais();" class="botao">Ver mais</button>

Javascript

var altura = document.querySelector(".minhaDiv");
function verMais(){
    if(altura.style.height <= "580px"){
       altura.style.height = "1600px";
       document.querySelector(".botao").innerHTML = "Ver menos";
    }else{
        altura.style.height = "580px";
        document.querySelector(".botao").innerHTML = "Ver mais";
    }
}

Does anyone know where I'm going wrong? Thanks a lot guys, and it sure is something very basic, I'm learning javascript, thanks!

javascript html

asked by anonymous 01.10.2015 / 23:00

3 answers

Why are tables created in hibernate deleted after stopping the server? Submit data from an input box using the enter key?

score 1 · Answer 1

Your error is just in this line:

if(altura.style.height <= "580px"){

Instead of comparing if it's less than or equal , compare if it's equal :

if(altura.style.height == "580px"){

var altura = document.querySelector(".minhaDiv");
function verMais(){
	  if(altura.style.height == "580px"){
       altura.style.height = "1600px";
       document.querySelector(".botao").innerHTML = "Ver menos";
    }else{
        altura.style.height = "580px";
        document.querySelector(".botao").innerHTML = "Ver mais";
    }
}

<div class="minhaDiv" style="display: block; background: red; height: 580px;">
	teste
</div>
<button onclick="verMais();" class="botao">Ver mais</button>

You should compare strings if one is equal to or different from the other, not smaller or larger.

score 0 · Answer 2

It seems to me that you should use a CSS class with this height of 1600px and then use .classList.toggle() to automatically add and remove that class.

To change the text of the button you can check if the element has the class with altura.classList.contains('aumentada') and then you can do a ternary condition to give the text you should have.

It would look something like this:

var altura = document.querySelector(".minhaDiv");
var button = document.querySelector('button');
button.addEventListener('click', function(){
    altura.classList.toggle('aumentada');
    button.innerHTML = altura.classList.contains('aumentada') ? 'ver menos' : 'ver mais';
});

and CSS:

.minhaDiv {
    height: 580px;
    transition: height .5s; /* opcional, cria uma animação */
}

.aumentada {
    height: 1600px;
}

Example: link

score 0 · Answer 3

Here is a way to do this using jQuery:

$('.botao').on('click', function() {
 var el = $('.minhaDiv');
    if (el.height() != 1600) {
        el.height(1600);
        $(this).text('Ver menos');
    } else {
        el.height(580);
        $(this).text('Ver mais');
    }
 });
<button class="botao">Ver mais</button>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js">
</script>

Here it's working: link

And here's a more lively version: link