Делаю простой курс доллара к рублю и при вводе букв в инпуты хочу чтоб поле окрашивалось в красный и вылазила ошибка.
<!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">
<title>Курс доллара</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="changer">
<div class="changer-container">
<label for="rub">RUB</label>
<input id="rub" class='inputv' type="text">
<label for="usd">USD</label>
<input id="usd" class='inputv' type="text">
</div>
</section>
<div class="alert alert-success" style="display: none;">Успешно</div>
<script src="script.js"></script>
</body>
</html>
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
.changer-container {
width: 100%;
text-align: center;
margin-top: 200px;
}
label {
display: block;
font-size: 30px;
}
input {
width: 300px;
height: 50px;
font-size: 30px;
margin-bottom: 50px;
}
/* .inputv:hover {
filter: grayscale(100%) drop-shadow(5px 5px 10px #666);
} */
.alert-success {
background:green;
margin:20px auto;
padding:20px;
color:#fff;
width:200px;
}
const inputRub = document.querySelector('#rub');
const inputUsd = document.querySelector('#usd');
inputRub.addEventListener('input',() => {
const request = new XMLHttpRequest();
request.open('GET','current.json');
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.send();
inputRub.addEventListener('input', () => {
if(inputRub.value.match(/\D/g)) {
inputRub.style.background = 'red';
alert('Используйте только числовые значения!');
} else {
inputRub.style.background = 'none';
}
});
inputUsd.addEventListener('input', () => {
if(inputUsd.value.match(/\D/g)) {
inputUsd.style.background = 'red';
alert('Используйте только числовые значения!');
} else {
inputUsd.style.background = 'none';
}
});
request.addEventListener('load', () => {
if (request.status === 200) {
const data = JSON.parse(request.response);
inputUsd.value = (+inputRub.value / data.current.usd).toFixed(2);
} else {
inputUsd.value = "Что-то пошло не так";
}
});
});
{
"current": {
"usd": 74.68
}
}
