I have such an div element:
<div className="rate" >
<mark className="rate-mark"> Rate : </mark>
<mark className="val-mark" style={{color}}> {rate}</mark>
</div>
where the color is a hook:
var green = "#0cb87f";
var red = "#ce2020";
const [color,setColor] = useState(green)
I'm trying to dynamically change the color like this :
if (response.getRate() < rate){
setColor(red)
}else{
setColor(green)
}
But in my case it turns out that the light is always green.I think the mark page element is just never updated.How can this be made to work?
Related
I'm creating a dropdown list that sets and resets colors of buttons nearby. I'm trying to copy an array html button elements into another array. The problem is, When I change the first array of elements(color, wrapping etc..) the copy also gets changed. Here's my code:
var buttons = document.getElementsByTagName('button');
var copyallbuttons = [];
for (let i=0; i<buttons.length; i++)
{
let x = buttons[i].style.backgroundColor;
copyallbuttons[i] = x;
}
But when I make changes to buttons, even copyallbuttons gets changed. Please let me know how to copy values of html elements into another array (without reference) so that changing one doesnt affect other. This is basically for the "reset" button on the front end to reload all old styles of the elements.
var buttons = document.getElementsByClassName('changeColour');
for (let i=0; i<buttons.length; i++)
{
buttons[i].style.backgroundColor ="red";
}
<button class="changeColour" >Button 1</button>
<button class="changeColour" >Button 2</button>
<button class="" >Button 3</button>
You can use var buttons = document.getElementsByClassName("example");
and give common class name for buttons which you want to change colour.
function changeColour(colour) {
var buttons = document.getElementsByClassName('changeColour');
for (let i=0; i<buttons.length; i++)
{
buttons[i].style.backgroundColor = colour;
}
}
$(".changeColour").click(function(){
changeColour("red");
});
$(".resetBtn").click(function(){
changeColour("black"); //here default colour
});
I'm struggling with conditional rendering views.
I usually use only double conditional rendering views, with a useState(true/false).
But today I need a triple conditional rendering view.
How can I build something like if color = red, you render red, if color = blue you render blue, if color = green you render green.
const TripleConditionalRendering = () => {
const [ color, setColor ] = useState("")
const handleClickRed = () => {
setColor("red")
}
const handleClickBlue = () => {
setColor("blue")
}
const handleClickRed = () => {
setColor("blue")
}
return (
<button onClick={handleClickRed}/>
<button onClick={handleClickBlue}/>
<button onClick={handleClickGreen}/>
{ color == red ? (
<p> the color is : red</p>
) : (
<p> the color is : blue or green, sorry cant make triple conditional rendering</p>
)}
// how can I add those ?
<p> the color is : blue</p>
<p> the color is : green</p>
)
}
It looks like you've already worked out that if it's not red, it must be blue or green.
Nesting logic
The format for a ternary is as follows:
predicate ? true_expression : false_expression
Since you already know that if the statement is false, it can be one of the other options, just nest the ternary, like so:
predicate ? true_expression : (nested_predicate ? nested_true : nested false)
In your specific example, this becomes:
color == red
? <red/>
: color == blue
? <blue/>
: <green/>
Of course, logically, there's no reason why the logic for blue and green should be nested under the logic for red, or why any color should be nested under another. In this case it might make more sense and be more readable if there was one ternary per color:
{ color == red ? <red/> : null }
{ color == blue ? <blue/> : null }
{ color == green ? <green/> : null }
Or perhaps a switch statement would be even more readable
I'm trying to make a virtual scroll and whenever the user scrolls down I need to add a negative top equal to the container height to each row. But of course this top property can vary depending of some factors like the user's screen resolution or browser window size.
So far this is what I got:
<div class="container" id="my-container">
<!--If it has the class row-scrolled the top property is applied-->
<div ng-repeat="(row) in virtualCollection"
ng-class="{'row-scrolled': controller.isScrolled}">
<!-- row properties -->
</div>
</div>
I have also thought about the idea of using ng-style but would override any style from my .css file.
Is there anyway to get the size/property of a DOM element...
// controller
var containerHeight = angular.element('#my-container')[0].clientHeight;
var cssProperty = '-' + containerHeight + 'px';
And then use it in an css?
// css
.row-scrolled {
top: cssProperty;
}
You can't pass variables from javascript to CSS since CSS is not a programming language but a style sheet language.
What you can do is manipulating specific elements with javascript.
Based on your code here is an example:
// controller
var containerHeight = angular.element('#my-container')[0].clientHeight;
var cssProperty = '-' + containerHeight + 'px';
var $$rowScrolled = document.querySelectorAll(".row-scrolled");
if ($$rowScrolled && $$rowScrolled.length > 0) {
for (var i = 0; i < $$rowScrolled.length; i++) {
var $rowScrolled = $$rowScrolled[i];
$rowScrolled.style.top = cssProperty;
}
}
With jQuery:
// controller
var containerHeight = angular.element('#my-container')[0].clientHeight;
var cssProperty = '-' + containerHeight + 'px';
var $rowScrolled = $(".row-scrolled");
if ($rowScrolled && $rowScrolled.length > 0) {
$rowScrolled.css("top", cssProperty);
}
You can not pass a variable to the CSS.
What you can do though is add the property directly using the ng-style tag:
<div class="container" id="my-container">
<!--If it has the class row-scrolled the top property is applied-->
<div ng-repeat="(row) in virtualCollection"
ng-style="{'top': controller.cssProperty}">
<!-- row properties -->
</div>
i have a div with the name #taget
<div class="col-md-10 col-xs-10">
<div class="quantity-buttons" #target>
....
in the code i am refrenceing it like this
#ViewChild('target') target;
on a button click i am trying to set the scrollTop property to some value.
this.target.nativeElement.scrollTop = 200;
but it has no effect. I can see scrollTop = 0 before and after the above line of code is executed.
Try this
#ViewChild('target') public myScrollContainer: ElementRef;
and then,
let nativeElement = this.myScrollContainer.nativeElement;
nativeElement.scrollTop = 200;
If I have:
<div id="abc" data-ng-show="abc.visible">xxx</div>
and in javascript:
$scope.abc.visible = true;
var modal = document.getElementById('abc');
var modal_width = parseInt(modal.width, 10)
var modal_height = parseInt(modal.height, 10)
var abc = $('#abc').width();
How can I now get the width of the div straight after setting the visible to true? I tried the above but it does not seem to be available to me.
Note that modal.width and modal.height both show here as undefined
Yes there is a delay. You need to watch $scope.abc.visible for changes. I've created a plunker to show you what I mean: http://plnkr.co/edit/zmPPcHVkc6RbdQvYRBtX?p=preview.