How to join these values in javascript?

Question

function setopacity(opa,id){
    //alert(opacity);
    document.getElementById("txt"+id).style.opacity = "."+opa;
}
function setBColor(Bclr,id){
    document.getElementById("txt"+id).style.background = "#"+Bclr;
}

<div class="col-sm-1">
    <input required type="text" value="FF8C66"  class="jscolor form-control input-lg" name="Bclr[]" onChange="setBColor(this.value,<?php echo $row; ?>);" >
</div>

<div class="col-sm-1">
    <input required="required"  placeholder="opacity" value="20" type="number" min="5" class="form-control input-lg" name="opa[]" onChange="setopacity(this.value,<?php echo $row; ?>);" >
</div>

Above is my code (part of code) i'm able to set opacity with above code in my style tag in output but its apply to text and background I mean to both. but I want to apply only to background. how I can done this with my code.

I just try this but not able to get result.

function setBColor(Bclr,id){
    document.getElementById("txt"+id).style.background = "#"+Bclr+"."+opa;
}

And willing to get output like this

<li class="drag" thk="1" id="txt1" draggable="true" ondragstart="drag_start(event);" style="top: 231px; left: 64px; font-family: &quot;BalooPaaji-Regular.ttf&quot;; color: rgb(21, 0, 255); background-color: rgb(21, 0, 255,0.2);">Your Text 1 </li>

Update : i just want to add these 2 values +Bclr+"."+opa so i can get output like background-color: rgb(21, 0, 255,0.2); this

Please help me. Sorry for my poor English.

opacity is for the entire element. Use another element to show texts, or omit the opacity, and use a semi-opaque background instead ( rgba(r, g, b, a) ). — Teemu
– Teemu, Commented Jan 11, 2019 at 13:38
@Teemu please see my update question i add what output i want , please explain how i can add these value , im new to javascript . hope got help thanks. — ddoye
– ddoye, Commented Jan 11, 2019 at 13:42
Hi, thanks for the link , in my question i just want to add these 2 values +Bclr+"."+opa so i can get output like background-color: rgb(21, 0, 255,0.2); this . hope you got my point now — ddoye
– ddoye, Commented Jan 11, 2019 at 13:48

Beniamin H · Accepted Answer · 2019-01-11 14:57:56Z

3

I hope this is what you need:

function hexToRGB(hex) {
  return [(hex>>16)&255, (hex>>8)&255, hex&255].join(', ');
}
function setBColor(id, Bclr, opa) {
  const rgb = hexToRGB('0x' + Bclr);
  document.getElementById("txt" + id).style.backgroundColor = "rgba(" + rgb + ", " + opa + ")";
}

Usage:

setBColor('Footer', 'AA0099', 0.75);
setBColor('Header', 'FFFFFF', 1);

answered Jan 11, 2019 at 14:57

Beniamin H

2,0941 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to join these values in javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related