在javascript中对同一onclick事件逐个调用两个不同的函数_Javascript_Html

在javascript中对同一onclick事件逐个调用两个不同的函数

javascript html

在javascript中对同一onclick事件逐个调用两个不同的函数,javascript,html,Javascript,Html,当我点击另一个div name按钮时，我有一个div内容的高度应该是300px。但是，当再次单击按钮div时，如何重置高度以下是javascript代码供参考： function chk() { var x = document.getElementById('content').style.height = '300px'; } 这是HTML代码 <div id="content"> This is dummy text. </div>

当我点击另一个div name按钮时，我有一个div内容的高度应该是300px。但是，当再次单击按钮div时，如何重置高度

以下是javascript代码供参考：

function chk()
{
    var x = document.getElementById('content').style.height = '300px';

}

这是HTML代码

<div id="content">
This is dummy text.
    </div>
    <div id="button" onclick="chk()">
    click to read
    </div>

当按钮div被选中时，单击内容高度会增加，但如何通过使用相同的onclick事件单击相同的div来降低高度？

或者使用一个标志

var flag;

function chk() {
    var height = flag ? '0px' : '300px';
    document.getElementById('content').style.height = height;
    flag = !flag;
}

或者通过检查当前高度

function chk() {
    var currHeight = document.getElementById('content').style.height;
    var setHeight = height == '300px' ? '0px' : '300px';
    document.getElementById('content').style.height = setHeight;
}

要么是旗帜

var flag;

function chk() {
    var height = flag ? '0px' : '300px';
    document.getElementById('content').style.height = height;
    flag = !flag;
}

或者通过检查当前高度

function chk() {
    var currHeight = document.getElementById('content').style.height;
    var setHeight = height == '300px' ? '0px' : '300px';
    document.getElementById('content').style.height = setHeight;
}

您可以使用一个标志：

var isSet = false:

function chk(){
    if(!isSet) {
        var x = document.getElementById('content').style.height = '300px';
        isSet = true;
    }
    else {
        // some other computation
        isSet = false;
    }

}

您可以使用一个标志：

var isSet = false:

function chk(){
    if(!isSet) {
        var x = document.getElementById('content').style.height = '300px';
        isSet = true;
    }
    else {
        // some other computation
        isSet = false;
    }

}

使用CSS：

#content {
    height: auto;
}
#content.expand {
    height: 300px;
}

在脚本中：

function chk()
{
    var node = document.getElementById('content');

    node.classList.toggle('expand');
}

这将使状态保持在您正在处理的元素的本地状态，从而使代码更加灵活

另请参见：

使用CSS：

#content {
    height: auto;
}
#content.expand {
    height: 300px;
}

在脚本中：

function chk()
{
    var node = document.getElementById('content');

    node.classList.toggle('expand');
}

这将使状态保持在您正在处理的元素的本地状态，从而使代码更加灵活

另请参见：

如果您只是在学习HTML、CSS和JavaScript，您应该从使代码更清晰开始

// HTML should look more like
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <style type='text/css'>
      @import 'common.css'; @import 'page.css';
    </style>
  </head>
<body>
  <div id='content'>
    This is dummy text.
  </div>
  <input type='button' value='click to read' id='button' />
  <script type='text/javascript' src='common.js'></script>
  <script type='text/javascript' src='page.js'></script>
</body>
</html>

注意，您的按钮应该是一个按钮，而不是一个div。对于scraping和XSLT，XHTML更具可扩展性，可以在HTML页面上工作，但反之亦然

// learn to keep your JavaScript separate pages for caching - common.js
//<![CDATA[
// reduce objects to smaller variables and never use `document.getElementById()`
var doc = document, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
//]]>

// page.js
//<![CDATA[
var button = E('button');
/* The self-executing Anonymous Function below creates scope for `var test` and
   returns an unexecuted function you can call later. Note that a function is 
   basically a variable that if you add `()` to will execute. */
var changeHeight = (function(){
  var test = false;
  return function(id, before, after){
    E(id).style.height = test ? before : after;
    test = !test;
  }
})();
/* This is a backward compatible way of creating an `onclick` function, unlike
   `.addEventListener()` and `attachEvent()`, this is assignment, so it will
    write over your last `onclick` assiged to this specific Element */
button.onclick = function(){
  changeHeight('content', '20px', '300px');
}
// To combat the comment above you could do something like this:
/*
button.onclick = function(){
  changeHeight('content', '20px', '300px');
}
function anotherFunction(){
  console.log('wow');
}
var before = button.onclick;
button.onclick = function(){
  if(before)before();
  anotherFunction();
}
*/
/* An executed function, would execute before the event is handled. The only
   thing that is automatically passed to your variable function or Anonymous
   Function is the Event Object. In this case it is not necessary, because we
   are not accessing the Event Object. */
//]]>

如果您只是在学习HTML、CSS和JavaScript，那么应该从使代码更清晰开始

// HTML should look more like
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <style type='text/css'>
      @import 'common.css'; @import 'page.css';
    </style>
  </head>
<body>
  <div id='content'>
    This is dummy text.
  </div>
  <input type='button' value='click to read' id='button' />
  <script type='text/javascript' src='common.js'></script>
  <script type='text/javascript' src='page.js'></script>
</body>
</html>

注意，您的按钮应该是一个按钮，而不是一个div。对于scraping和XSLT，XHTML更具可扩展性，可以在HTML页面上工作，但反之亦然

// learn to keep your JavaScript separate pages for caching - common.js
//<![CDATA[
// reduce objects to smaller variables and never use `document.getElementById()`
var doc = document, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
//]]>

// page.js
//<![CDATA[
var button = E('button');
/* The self-executing Anonymous Function below creates scope for `var test` and
   returns an unexecuted function you can call later. Note that a function is 
   basically a variable that if you add `()` to will execute. */
var changeHeight = (function(){
  var test = false;
  return function(id, before, after){
    E(id).style.height = test ? before : after;
    test = !test;
  }
})();
/* This is a backward compatible way of creating an `onclick` function, unlike
   `.addEventListener()` and `attachEvent()`, this is assignment, so it will
    write over your last `onclick` assiged to this specific Element */
button.onclick = function(){
  changeHeight('content', '20px', '300px');
}
// To combat the comment above you could do something like this:
/*
button.onclick = function(){
  changeHeight('content', '20px', '300px');
}
function anotherFunction(){
  console.log('wow');
}
var before = button.onclick;
button.onclick = function(){
  if(before)before();
  anotherFunction();
}
*/
/* An executed function, would execute before the event is handled. The only
   thing that is automatically passed to your variable function or Anonymous
   Function is the Event Object. In this case it is not necessary, because we
   are not accessing the Event Object. */
//]]>

@akonsu你能告诉我怎么做吗？你也可以添加一个css规则@PSL这就是我想要的工作方式。但是转换属性不起作用。如果你能把它也放进去的话。那太好了。@SahibjotSingh您可以在规则中添加一个css转换，类似于@PSL，但进展不顺利。它正在工作，但它应该像过渡持续时间属性一样平稳地增加和减少。@akonsu你能告诉我怎么做吗？你也可以添加一个css规则@PSL这就是我想要的工作方式。但是转换属性不起作用。如果你能把它也放进去的话。那太好了。@SahibjotSingh您可以在规则中添加一个css转换，类似于@PSL，但进展不顺利。它正在工作，但它应该像过渡持续时间属性一样平稳地增加和减少。这就是我希望它工作的方式。但是转换属性不起作用。如果你能把它也放进去的话。那太好了。@SahibjotSingh什么转换属性？转换持续时间。因此，高度平稳地增加和减少。@SahibjotSingh这个问题是关于解决JavaScript问题的，所以为了得到关于CSS转换的答案，我建议要么搜索这个问题，要么问另一个问题。这就是我希望它如何工作的。但是转换属性不起作用。如果你能把它也放进去的话。那太好了。@SahibjotSingh什么转换属性？转换持续时间。所以高度可以平稳地增减。@SahibjotSingh这个问题是关于解决JavaScript问题的，所以为了得到关于CSS转换的答案，我建议要么搜索这个问题，要么问另一个问题。