تسجيل الدخول | التسجيل | الأسئلة المتكررة
Anonymous

how to perform 2 different events using just one HTML button

+ إضافة رد

مشاركة واحده صفحة 1 من 1


how to perform 2 different events using just one HTML button

بواسطة songa » الأربعاء سبتمبر 27, 2017 6:56 pm

hello...

The code below is okay and it works.
During the lines...
CODE: تحديد الكل
    <a href='?f=on' onclick="alert('LiGHT ON')" class='btn1 btn-sea'>ON</a>
    <a href='?f=off' onclick="alert('LiGHT OFF')" class='btn2 btn-sea'>OFF</a>
the expression...
CODE: تحديد الكل
a href='?f=xxx'
pass the parameter that I need to use in the system where this html is installed.
That means there are 2 buttons, one for each different event.

I'd like to do the same thing, but using only one button to do the 2 events...
something like a toggle button.

It is important to keep using the HTML and also the CSS and do not use external links too!

thank you for your help!


CODE: تحديد الكل
<!DOCTYPE HTML>
<html>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='cache-control' content='max-age=0' />
  <meta http-equiv='cache-control' content='no-cache' />
  <meta http-equiv='expires' content='0' />
  <meta http-equiv='expires' content='Tue, 01 Jan 1980 1:00:00 GMT' />
  <meta http-equiv='pragma' content='no-cache' />

  <title>automation</title>

  <style>
   body {font-family: Helvetica; color: rgb(85,85,85);} /* backgroud color */
   h1 {font-size: 24px; font-weight: normal; margin: 0.4em 0;}
   .container {width: 100%; margin: 0 auto;}
   .container .row {float: left; clear: both; width: 100%;}
   .container .col {float: left; margin: 0 0 1.2em; padding-right: 1.2em; padding-left: 1.2em;}
   .container .col.twelve {width: 100%;}
   @media screen and (min-width: 200px) {
   .container {width: 50%; max-width: 1080px; margin: 0 auto;}
   .container .row {width: 100%; float: left; clear: both;}
   .container .col {float: left; margin: 0 0 1em; padding-right: .5em; padding-left: .5em;}
   .container .col.four {width: 50%;}
   .container .col.tweleve {width: 100%;}}
   * {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
   a {text-decoration: none;}

   .btn1 {font-size: 20px;
          white-space: nowrap;
          width: 100%;
          padding: .8em 1.5em;
          font-family: Helvetica;
          line-height: 20px;
          display: inline-block;
          zoom: 1;
          color: rgb(255,255,255);
          text-align: center;
          position:relative;
          -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
          transition: border .25s linear, color .25s linear, background-color .25s linear;}
   .btn1.btn-sea{background-color: rgb(15,219,0); border-color: rgb(10,145,0); -webkit-box-shadow: 0 3px 0 rgb(10,145,0); box-shadow: 0 3px 0 rgb(10,145,0);}
   .btn1.btn-sea: hover{background-color: rgb(10,145,0);}
   .btn1.btn-sea: active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}

   .btn2 {font-size: 20px;
          white-space: nowrap;
          width: 100%;
          padding: .8em 1.5em;
          font-family: Helvetica;
          line-height: 20px;
          display: inline-block;
          zoom: 1;
          color: rgb(255,255,255);
          text-align: center;
          position:relative;
          -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
          transition: border .25s linear, color .25s linear, background-color .25s linear;}
   .btn2.btn-sea{background-color: rgb(255,42,42); border-color: rgb(204,0,0); -webkit-box-shadow: 0 3px 0 rgb(204,0,0); box-shadow: 0 3px 0 rgb(204,0,0);}
   .btn2.btn-sea: hover{background-color: rgb(204,0,0;}
   .btn2.btn-sea: active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}

  </style>
</head>

<body>
  <div class='container'>
  <div class='row'>
  <div class='col twelve'>
   <p align='center'>
    <font size='10'>REMOTE CONTROL</font>
   </p>
  </div> </div>
   <div class='row'>
   <div class='col four'>
    <a href='?f=on' onclick="alert('LiGHT ON')" class='btn1 btn-sea'>ON</a>
   </div>
   <div class='col four'>
    <a href='?f=off' onclick="alert('LiGHT OFF')" class='btn2 btn-sea'>OFF</a>
   </div> </div>
    <div class='col twelve'> </div> </div>

</body>
</html>
صورة العضو الشخصية

songa

  • مشاركات: 1
  • اشترك في: الأربعاء سبتمبر 27, 2017 3:49 pm


+ إضافة رد

صفحة 1 من 1