使用ajax单击按钮时更改html元素的高度

时间:2018-03-19 13:57:35

标签: javascript ajax

我有一个login.php页面。该页面包含php和html。当点击登录按钮时,它将登录我并转发给欢迎页面或输出"您的密码或用户名无效"。我想改变一个元素的高度。可悲的是,这个doesen工作是因为php正在重新加载页面(女巫有意义)。我听说我可以使它与Ajax一起工作。 有人知道怎么做吗?

按钮:

<input id="button" type="submit" value="Log In" onclick="ausgabe();">

使用Javascript:

function hardgainer(){
    var gainheight = document.getElementById('gain')
    gainheight.style.height ="220px";
    document.getElementById('gain').innerHTML = gainheight;
}

function ausgabe(){
    document.getElementById('button') = 
        hardgainer();
}

1 个答案:

答案 0 :(得分:0)

提交表单,因此页面会重新加载。您应该将type更改为type="button",然后您可以制作以下内容:

function hardgainer(){
    var gainheight = document.getElementById('gain')
    gainheight.style.height = "220px";
}

document.getElementById("gbutton").addEventListener("click", function() {
  hardgainer()
})
#gain {
  background: red;
  width: 200px;
}
<input id="gbutton" type="button" value="Log In">

<div id="gain"></div>