How to change the href of a link dynamically?

Navigation
0

The code at the end of the statement is OK and works as expected.

On the lines 

<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: href='?f=xxx' passes the parameter that it takes for the system to work. This means that there are 2 buttons, one for each different value of the parameter.

I'd like to do the same thing, however, with just one button to hold one event at a time. Something like the toggle button.

It's also important to keep using HTML / CSS / JavaScript and do not use links or calls to external routines, as this code will be embedded. 

<!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>
    
asked by anonymous 27.09.2017 / 21:55

2 answers

0

Some information is trivial to understand the problem and was passed in the comments of the question:

  • The page will be served by a C-code embedded in some electronic device. This implies that the client and server may not have an internet connection to depend on files served by a CDN and that the page size is extremely sensitive and can not use third-party libraries (jQuery), which considerably increase payload of the application;

  • As the page is served by a C code, a GET request must be performed at the push of a button, otherwise the server will never be notified of the change of the parameter.

That said, we can solve the problem using JavaScript ( Vanilla ). As commented by the questioner, the initial state of the button can be OFF . So we set the button in HTML: 

<a id="btn" href='?f=off' onclick="alert('LiGHT OFF')" class='btn2 btn-sea'>OFF</a>

It's exactly the code presented in the question with the addition of the id attribute, which will be required to work with JavaScript. The logic will be as follows: when loading the page, JavaScript will check if a ?f parameter was passed by the URL; if it was not, the button code above will remain unchanged, but if passed, the href value and the button text will be set to the value ?f . That is, if ?f=on , then the button to be displayed should be OFF , but if ?f=off , then the button to be displayed will be ON .

First, we get the current page URL: 

const url = window.location.href;

The values of url will be, depending on the situation: 

http://0.0.0.0/index.html
http://0.0.0.0/index.html?f=on
http://0.0.0.0/index.html?f=off

Because these values are only possible, we can extract the value of f with a simple regular expression: 

/\?f=(on|off)/

So, if we do: 

const match = url.match(/\?f=(on|off)/);

The value of match will be null when the value of ?f is not specified, or an array , that in position 1 there will be on or off depending on which was specified. So, we do: 

// Verifica se o parâmetro existe:
if (match != null) {

    // Verifica se o valor de ?f é OFF:
    if (match[1] == "off") {

        // Sim, então deverá exibir o botão ON:
        const button = document.getElementById("btn");

        // Altera a URL do botão para ON:
        button.setAttribute("href", "?f=on");

        // Altera o texto do botão:
        button.innerHTML = "ON";

        // Altera a classe do botão para 'btn1':
        button.className = "btn1 btn-sea";

        // Altera o evento 'click' do botão para exibir a mensagem "light ON":
        button.onclick = function () {
            alert("Light ON");
        };

    }

}

So when is accessed, the button will change to ON , otherwise nothing will happen and the original OFF button will remain on the page.

To insert this code into the page, just insert it between the tags ?f=off : 

<script type="text/javascript">
    const url = window.location.href;
    const match = url.match(/\?f=(on|off)/);

    // Verifica se o parâmetro existe:
    if (match != null) {

        // Verifica se o valor de ?f é OFF:
        if (match[1] == "off") {

            // Sim, então deverá exibir o botão ON:
            const button = document.getElementById("btn");

            button.setAttribute("href", "?f=on");
            button.innerHTML = "ON";

            button.className = "btn1 btn-sea";

            button.onclick = function () {
                alert("Light ON");
            };

        }

    }
</script>
  

See the page working in JSBin .

    
27.09.2017 / 23:41
0

Follow a solution 

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;
}

.btnOn {
  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;
}

.btnOn.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);
}

.btnOn.btn-sea: hover {
  background-color: rgb(10, 145, 0);
}

.btnOn.btn-sea: active {
  top: 3px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btnOff {
  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;
}

.btnOff.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);
}

.btnOff.btn-sea: hover {
  background-color: rgb(204, 0, 0;
}

.btnOff.btn-sea: active {
  top: 3px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
<script type="text/javascript">
function changeStatus (el) {
  var isOn = el.innerHTML == "ON";
  el.className = 'btn-sea ' + (isOn ? "btnOff" :  "btnOn");
  el.innerHTML = isOn ? "OFF" : "ON";
}
</script>

<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='javascript:void(0)' onclick="changeStatus(this)" class='btnOn btn-sea'>ON</a>
    </div>
  </div>
  <div class='col twelve'> </div>
</div>
    
27.09.2017 / 22:05
Error 407 when connecting in proxy Crystal Reports Repeat Header On Next Page