Modeling a modestly complicated button assembly...

20 views
Skip to first unread message

Burt Paulie

unread,
Jan 11, 2022, 9:46:20 AMJan 11
to Google Apps Script Community
I'm working with jquery in an .html file to link a pair of buttons to a pair of text areas and their respective font color cycles. I have a jquery sample in script tags that works in JSfiddle but only activates the left button in GAS.  Fixing the left button is my present priority. Does anyone have any suggestions on how to get both buttons flowing through their click cycle? I tried moving the script tags to the top of the file and include the async keyword but saw no change in the behavior. The link is below as is the code. The jquery script is at the bottom...


<!DOCTYPE html>
<style>
.flex-parent {
  display:flex;
  width: 100%;
  }

.flex-child {
  flex:1;
  width:100%;
  }

.flex-parent div{
  width:50%;
  }

.flex-parent div textarea{
  width:100%;
  }

.black {
  background-color:black;
  }

.red {
  background-color:red;
  }

.green {
  background-color:green;
  }

.blue {
  background-color:blue;
  }

.white {
  background-color:white;
  }

.LTR-textarea {
  position:relative;
  resize:none;
  height:10080px;
  width:100%;
  background-color:green;
  color:white;
  margin-top:60px;
  margin-left:0px;
  box-sizing:border-box;
  border:none;
  outline:none;
  }

.LTR-textarea::placeholder {
  content:"KernskyLTR...";
  color:white;
  }
 
.RTL-textarea {
  position:relative;
  resize:none;
  height:10080px;
  width:100%;
  background-color:white;
  color:green;
  margin-top:60px;
  margin-left:0px;
  box-sizing:border-box;
  border:none;
  outline:none;
  transform:rotateY(180deg);
  }

.RTL-textarea::placeholder {
  content:"KernskyRTL...";
  color:green;
  }
 
.button-left-bottom {
  height: 30px;
  width: 15px;  
  margin: 0px;
  border-radius: 15px 0px 0px 15px;
  border: none;
  position: absolute;
  float:right;  
  top:100%;
  right:50%;
  }

.button-right-bottom {
  height: 30px;
  width: 15px;
  margin: 0px;
  border-radius: 0px 15px 15px 0px;
  border: none;
  position: absolute;
  top:100%;
  left:50%;
  }
 
</style>

<body style="background-color:gray">
    <div class="flex-parent">        
        <div class="flex-child" id="button-nav">                                          
           <textarea class="LTR-textarea" placeholder="KernskyLTR..."></textarea>
           <button class="button-left-bottom" type="button" data-btn="0" style="top:18px"></button>          
        </div>  
        <div class="flex-child" id="button-nav">                      
           <textarea class="RTL-textarea" placeholder="KernskyRTL..."></textarea>        
           <button class="button-right-bottom" type="button" data-btn="1" style="top:18px"></button>          
        </div>    
    </div>
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="Code.gs"></script>
    <script>
    var colors = ["black", "red", "green", "blue", "white"];
    var buttonIndex = [0,0];
   
    $('#button-nav').on('click','button', function (evt) {
    var res = $(this).data('btn');
    $(this).removeClass(colors[buttonIndex[res]]);
    buttonIndex[res] = (buttonIndex[res] +1) % 5;
    if(res == 0) {
      if (buttonIndex[1] == buttonIndex[res]) {
                     buttonIndex[res] = (buttonIndex[res] +1) % 5;
      }
    }
    if(res == 1) {
      if (buttonIndex[0] == buttonIndex[res] ) {
                     buttonIndex[res] = (buttonIndex[res] +1) % 5;
      }
    }
    $(this).addClass(colors[buttonIndex[res]]);
    });
    </script>    
</body>

Clark Lind

unread,
Jan 13, 2022, 9:59:13 AMJan 13
to Google Apps Script Community
You have two distinct buttons, but have given them both the same ID. It will only respond to the first one with the ID. 
Also, ensure your HTML is correct by using a <head> tag to store your styles and a closing </html> tag. Most browsers are forgiving, but it may cause problems.

If I paste in just your html file, it doesn't work in JSFiddle for me. So you may have added something in JSFiddle (another library?) that isn't available to me. If you want to save your fiddle and share it, that might help.

Clark Lind

unread,
Jan 13, 2022, 9:59:47 AMJan 13
to Google Apps Script Community
p.s., in any case, this isn't an Apps script issue, this is a javascript issue :)

Burt Paulie

unread,
Jan 16, 2022, 11:41:57 AMJan 16
to Google Apps Script Community
Understood. Thanks...
Reply all
Reply to author
Forward
0 new messages