Using 2 JS functions combined for one on click action

[PNewCode]

Stemming of the question with resolution by @mac_gyver , I'm taking that education to add something new. And it works beautifully UNTIL I try it with the gradient

Objective, to have instant background change to a <td> on clicking the buttons.
When it's just one color and one button, it's flawless
When it comes to the gradient, it's a no go. Below is the original question (I made a new topic because I assume it's a new question entirely. I apologize if I should have just added this to the other topic instead)
As you can see I've tried several variations but I'm stuck. I wont list all of what I've tried because I really only remember the last 4 or 5 methods I attempted

What works (it's labeled 2, in order to give some clarity and because there are multiple options to select)

////// This is the java script and button that will change the <td> background color - This works for one color and one function //////

<script>
  function setColor2(color2){ 

    document.getElementById("tableCell2").style.backgroundColor=color2;
};
</script>
  
  <img src="btn/colorpicker/blue.png" data-color='blue' onClick="pic_color2(this); setColor2('blue');" class="pointer clrimg">
  
<td id="tableCell2">Some stuff added in this cell</td>

This does NOT work for gradients. I am thinking that it's because I need to have both functions in the same element ID. I've tried many many approaches but all have failed

////// This did not work //////

<script>
     function setColor3(color3){ 

}

   function setColor4(color4){ 

}

    document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", " + color4 + ")";
};
</script>


////// neither did this one //////

<script>
   function setColor3(color3){ 

    document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", " + color4 + ")";
};

   function setColor4(color4){ 

    document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", " + color4 + ")";
};
</script>



////// And neither did this one //////

<script>
   function setColor3(color3, color4){ 

    document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", " + color4 + ")";
};
</script>



////// And naturally... neither did this one //////

<script>
   function setColor3, setColor4(color3, color4){ 

    document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", " + color4 + ")";
};
</script>



////// Also tried this, and no go //////

<script>
   function setColor3(color3) + setColor4(color4) { 

    document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", " + color4 + ")";
};
</script>



_______________

The buttons:

<img src="btn/colorpicker/blue.png" data-color='blue' onClick="pic_color3(this); setColor3('blue');" class="pointer clrimg"><br>

<img src="btn/colorpicker/red.png" data-color='red' onClick="pic_color4(this); setColor4('red');" class="pointer clrimg"><br>

______________

<td id="tableCell3">Stuff in this cell</td>

Here is something that DOES work with the gradients, however it's not usable because I need to be able to change both colors, not have one static all the time
 

////// This will change the gradients, but one of the colors is always defined instead of refering to the selected color //////

<script>
  function setColor3(color3){ 

    document.getElementById("tableCell3").style.background = "linear-gradient(to right, " + color3 + ", white)";
};

   function setColor4(color4){ 

    document.getElementById("tableCell3").style.background = "linear-gradient(to right, white, " + color4 + ")";
};
</script>


_______________

The buttons:

<img src="btn/colorpicker/blue.png" data-color='blue' onClick="pic_color3(this); setColor3('blue');" class="pointer clrimg"><br>

<img src="btn/colorpicker/red.png" data-color='red' onClick="pic_color4(this); setColor4('red');" class="pointer clrimg"><br>

______________

<td id="tableCell3">Stuff in this cell</td>

 

Edited July 31, 2023 by PNewCode

[requinix]

You need to have the code remember what the two colors are. The user picks one, but they have to pick another so you can't do a gradient yet (unless you have default colors), and the user picks the other. Each click of the button only tells you how to update a single color, which means you have to track what the other color is supposed to be yourself.

But there is a fancy way of doing that: CSS variables. https://jsfiddle.net/jqrg7vcf/ The less mucking about with CSS rules you have to do, the better.

Note that a gradient background of blue -> blue is the same as just a straight blue non-gradient background.

[Barand]

MY (reduced number of colours) take on your problem - using SVG for the gradients

Code...

<?php

function disc($col, $name)
{
    $cd = colourDarker($col);
    $cl = colourLighter($col);
    return "<svg width = '50' height='50'>
             <defs>
             <linearGradient id='grad' x1='0' x2='1' y1='0' y2='0'>
                <stop offset='0.1' stop-color='$cd'/>
                <stop offset='0.85' stop-color='$cl'/>
             </linearGradient>
             </defs>
             <circle cx='25' cy='25' r='24' fill='url(#grad)' />
             <circle cx='25' cy='25' r='17' fill='$col' fill-opacity='0.4' stroke='$cl' stroke-width='2' class='disc' data-name='$name'>
                 <title>$name</title>
             </circle>
             </svg>
             ";
}

function colourDarker($colour)
{    
    $lc = strlen($colour);
    $format = $lc==4 ? '#%1x%1x%1x' : '#%2x%2x%2x';
    $rgb = sscanf($colour, $format);
    foreach ($rgb as $k=>&$v) {
        if ($lc==4) {
            $v = $v*16+$v;
        }
        $dv = min($v,0x66);
        $v -= $dv;
    }
    return vsprintf('#%02X%02X%02X', $rgb);
}

function colourLighter($colour)
{
    $lc = strlen($colour);
    $format = $lc==4 ? '#%1x%1x%1x' : '#%2x%2x%2x';
    $rgb = sscanf($colour, $format);
    foreach ($rgb as $k=>&$v) {
        if ($lc==4) {
            $v = $v*16+$v;
        }
        $dv = min(255-$v,0x66);
        $v += $dv;
    }
    return vsprintf('#%02X%02X%02X', $rgb);
}


?>
<html>
<head>
   <title>Example</title> 
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type='text/javascript'>
       $(function() {
           
           $(".disc").click(function() {
               let name = $(this).data('name')
               $("#namecolor").css('color', name).val(name)
               $(".disc").parent().css('border','1px solid #000')
               $(this).parent().css('border','1px solid #ccc')
           })
       })
   </script>

   <style type='text/css'>
       #cpicker {
           width: 500px;
           margin: 50px auto;
           background-color: #000;
           color: white;
           text-align: center;
       }
       #nctable {
           width: 200px;
           margin: 0 auto;
           /*background-color: black;
           color: white;*/
       }
       #sctable {
           width: 100%;
           background-color: black;
           color: white;
           border-top: 2px solid white;
           
       }
       td {
           text-align: center;
       }
       .hotspot {
           fill: #fff;
           fill-opacity: 0.4;
           stroke: #FFF;
           cursor: pointer;
       }
       .title, th {
           font-variant: small-caps;
       }
       .rounded {
           background-color: #ccc;
           border-radius: 15px 15px;
           height: 36px;
           width: 340px;
           padding: 0 15px;
           font-size: 24pt;
       }
   </style>
</head>
<body>
    <header>
        <h1>Example</h1>
    </header>
    
    <form id='form1' method='post'>
        <div id='cpicker'>
            <h3 class='title'>Name Color</h3>
            <table id='nctable'>
                <tr><td><?= disc('#0000ff', 'Blue')  ?></td>
                    <td><?= disc('#ff0000', 'Red')   ?></td>
                    <td><?= disc('#00ff00', 'Green') ?></td>
                </tr>    
                <tr><td><?= disc('#8B0000', 'DarkRed') ?></td>
                    <td><?= disc('#000000', 'Black')   ?></td>
                    <td><?= disc('#ff69b4', 'HotPink') ?></td>
                </tr>    
            </table>
            <table id='sctable'>
                <tr><th>Current&nbsp;Color</th>
                    <th>New Selected Color</th>
                </tr>
                <tr><td><?= disc('#000000', 'Black')   ?></td>
                    <td><input type='text' class='rounded' name='namecolor' id='namecolor' value=''></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>