I am just trying to print hello world in console by putting condition. It is not working, I don't know why. It is work properly outside of condition. But when I try to print message only if translateX is equal to 0px of item4 id. If you know the reason, Please help me out.
My code here:
item4 = document.getElementsByClassName('items')[3]
function leftarrow() {
// not working
if (item4.style.transform == 'translateX(0px)') {
console.log("Hellow World")
}
}.items{
border: 2px solid red;
text-align: center;
width: 300px;
height: 300px;
position: absolute;
background-color: yellow;
transform: translateX(0px);
}
.contains{
border: 2px solid black;
width: 310px;
height: 310px;
}
#btn{
width: 100px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Slider</title>
</head>
<body>
<div id="screen" class="container">
<div id="main-div">
<button id="btn" onclick="leftarrow()">
print
</button>
<div class="contains">
<div id="item1" class="items">ItemBox 1</div>
<div id="item2" class="items">ItemBox 2</div>
<div id="item3" class="items">ItemBox 3</div>
<div id="item4" class="items">ItemBox 4</div>
</div>
</div>
</div>
</body>
<script src="index.js"></script>
</html>You can use getComputedStyle to get the transform matrix values (for example: "matrix(1, 0, 0, 1, 20, 0)"). Split it up and clean it so you only get the values. Then check if the value for x (second last value[onlyVals.length - 2]) is equal to a specified value.
item4 = document.getElementsByClassName('items')[3]
function leftarrow() {
const transformMatrixVals = getComputedStyle(item4).transform.split(",");
const onlyVals = transformMatrixVals.map(v => v.replace(/\D/g, ""));
const xVal = onlyVals[onlyVals.length - 2]; // 20
if (xVal === "20") {
console.log("Hello World");
}
}
leftarrow();.items{
border: 2px solid red;
text-align: center;
width: 300px;
height: 300px;
position: absolute;
background-color: yellow;
transform: translateX(20px);
}<div id="item1" class="items">ItemBox 1</div>
<div id="item2" class="items">ItemBox 2</div>
<div id="item3" class="items">ItemBox 3</div>
<div id="item4" class="items">ItemBox 4</div>