Я пытаюсь получить информацию от API, чтобы затем отредактировать html ширину стиля, чтобы показать индикатор выполнения, я не могу получить переменную из API для редактирования ширины, , но я знаю функцию для редактирование ширины вправо , так как, когда я просто добавляю числа (px), вместо этого оно меняется. должно быть, я использую переменную
я предполагаю, что мне нужно что-то сделать с переменной, прежде чем я смогу использовать ее для этого
<!DOCTYPE html>
<html lang="en">
<head>
<title>Default page</title>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="Default page" name="description">
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
body {
background-color: powderblue;
margin: 0;
box-sizing: border-box;
padding: 0;
}
.Name,.Rankedkd,.Rankedmmr,.Rankedbar{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Name{
top:45%;
}
.Rankedkd{
top:50%%;
}
.Rankedmmr{
top:55%;
}
.Rankedbar{
top:60%;
width:500px;
height:15px;
background-color:white;
border: 30px solid #1C6EA4;
border-radius: 40px;
}
.Rankedbarin{
background-color: #1C6EA4;
height:100%;
width: 100px;
}
</style>
</head>
<body>
<div class="Name">i dont know</div>
<div class="Rankedkd">i dont know</div>
<div class="Rankedmmr">i dont know</div>
<div class="Rankedbar">
<div class="Rankedbarin"></div>
</div>
<script>
let name = document.querySelector('.Name');
let rankedkd = document.querySelector('.Rankedkd');
let rankedmmr = document.querySelector('.Rankedmmr');
fetch(' https://r6.apitab.com/search/uplay/Sir.Charles.')
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
const {kd,mmr} = data.players["179704b6-f18c-48c0-b789-56c38a9e2e8e"].ranked;
name.textContent = data.requested;
rankedkd.textContent = kd;
rankedmmr.textContent = mmr;
const WidthOfMmr = mmr / 10;
document.querySelector('.Rankedbarin').style.width = "'%spx',WidthOfMmr";
console.log('%spx',WidthOfMmr);
});
</script>
</body>
</html>