Как исправить проблему с двумя десятичными знаками, когда точка .01 возвращается к 0
Проблема в том, что когда я ввожу число, такое как 18.0, мой код становится равным 18, где я хочу, чтобы мой пользователь свободно вводил 18.06. Но мой код не позволяет пользователю подняться выше 18.0.
My Fiddlehttps://jsfiddle.net/dev2804/cf8vwrbj/1/
function Process() {
var AUS = 1; //CURENY RATE CAN BE CHAGNED BUT THE COUNTRIES IT SELF WON'T, ITS NOT A PART OF THE ASSIGNMENT.
var YEN = 82;
var YAUN = 5;
var RUPIAH = 10000;
var val = event.target.value;
var country = {
"Australia": AUS,
"JapaneseYen": YEN,
"ChineseYuan": YAUN,
"IndonesianRupiah": RUPIAH
};
var countRate;
if (event.target.id == 'countryAustralia') {
countRate = AUS;
} else if (event.target.id == 'countryJapaneseYen') {
countRate = YEN;
} else if (event.target.id == 'countryChineseYuan') {
countRate = YAUN;
} else if (event.target.id == 'countryIndonesianRupiah') {
countRate = RUPIAH;
}
var text = "";
var i;
var rateMp = (val / countRate);
if (val > 0.01 || val < 0) {
for (var i in country) {
var currency = (rateMp * country[i]);
var input = document.querySelector('#country' + i); // select the input by it's ID, I used the country object to build the selector
input.value = currency; // assign the calculated value to the input
}
} else if (val == "") {
for (var i in country) {
var currency = "";
var input = document.querySelector('#country' + i);
input.value = currency;
}
} else if (val.toString() == "0") {
for (var i in country) {
var currency = 0.00;
var input = document.querySelector('#country' + i);
input.value = currency;
}
}
}<Section class = "container">
<Table>
<tr class = "RowDesign">
<td class = "CountryName">
<div class = "CountryText">Australia</div>
</td><br>
<td>
<INPUT placeholder = "AUD" type = "number" Class = "Country" ID = "countryAustralia" list = "CommonVal" oninput = "Process();" onClick = "Remove();" />
</td>
</tr>
<tr class = "RowDesign">
<td class = "CountryName">
<div class = "CountryText">Japan</div>
</td><br>
<td>
<INPUT type = "number" placeholder = "JPY" Class = "Country" ID = "countryJapaneseYen" list = "CommonVal" oninput = "Process();" onClick = "Remove();" />
</td>
</tr>
<tr class = "RowDesign">
<td class = "CountryName">
<div class = "CountryText">China</div>
</td><br>
<td>
<INPUT type = "number" placeholder = "CNY" Class = "Country" ID = "countryChineseYuan" list = "CommonVal" onInput = "Process();" onClick = "Remove();" />
</td>
</tr>
<tr class = "RowDesign">
<td class = "CountryName">
<div class = "CountryText">Indonesia</div>
</td><br>
<td>
<INPUT type = "number" placeholder = "IDR" Class = "Country" ID = "countryIndonesianRupiah" list = "CommonVal" oninput = "Process();" onClick = "Remove();" />
</td>
</tr>
<Datalist ID = "CommonVal">
<option value=1>1</option>
<option value=10>10</option>
<option value=100>100</option>
<option value=500>500</option>
</Datalist>
</Table>
</Section>Я пробовал пару операторов if, но не работал. Так что теперь я понятия не имею, как исправить эту ошибку.
Беспорядок с подстрокой в валидации выглядит подозрительно. Можно ли вместо этого использовать регулярные выражения?
—
17.07.2019 08:25
@trognanders Я исправил код, но проблема осталась прежней.
—
17.07.2019 08:31
извините, @Sachi.Dila, я не видел вашего комментария.
—
17.07.2019 08:37
Почему вы используете validate()?
—
17.07.2019 08:38
@Бхавана, где?
—
17.07.2019 08:45
Это должно быть полезно для небольших приращений. stackoverflow.com/questions/19011861/… Я бы рекомендовал не использовать ввод чисел. Может быть, добавить регулярное выражение в поле ввода? Использование атрибута шаблона на входе?
—
17.07.2019 08:57
Я думаю, что ваша проблема связана с использованием номера типа ввода. Проверьте с помощью console.info значения, прежде чем устанавливать их в качестве входных данных.
—
17.07.2019 09:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
126
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вы можете попробовать это, я обновил ваш код:
<HTML>
<HEAD>
<TITLE>Currency Converter Protype4</TITLE>
</HEAD>
<BODY>
<Style>
body {
background-image: url(https://lh4.googleusercontent.com/-XplyTa1Za-I/VMSgIyAYkHI/AAAAAAAADxM/oL-rD6VP4ts/w1184-h666/Android-Lollipop-wallpapers-Google-Now-Wallpaper-2.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
font-family: 'Roboto', sans-serif;
}
table{
border-collapse: collapse;
width: 360px;
height: 370px;
border-radius: 5px;
position: absolute;
top: 50%; /*Remember this */
left: 50%;
margin-top: -185px;
margin-left: -180px;
}
.RowDesign{
height: 80px;
background-color: #ccffff;
border: 10px solid #b3b3ff;
border-radius: 5px;
}
.container{
position: absolute;
top: 50%; /*Remember this */
left: 50%;
margin-top: -200px;
margin-left: -190px;
width: 380px;
height:400px;
background-color: #b3b3ff;
border: 3px solid #b3b3ff;
border-radius: 5px;
}
.CountryName{
padding-left: 8px;
padding-right: 18px;
padding-top: 5px;
text-align: center;
}
.ImgText{
width: 70px;
height: 45px;
border: 1px solid #fff;
}
.Country{
height: 30px;
width: 175px;
padding-left: 20px;
border: 2px solid #0066ff;
border-radius: 15px;
}
.Country:hover{
background-color: #e6e6ff;
}
.CountryText{
vertical-align: center;
visibility: hidden;
font-weight: Bold;
color: #3d2263;
}
.ImgText:hover ~ .CountryText{
visibility: visible;
}
input:focus {
background-color: #e6e6ff;
}
</Style>
<Section class = "container">
<Table>
<tr class = "RowDesign">
<td class = "CountryName"><img class = "ImgText" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Flag_of_Australia_%28converted%29.svg/1600px-Flag_of_Australia_%28converted%29.svg.png" alt = "Australia"><div class = "CountryText">Australia</div></td><br>
<td><INPUT placeholder = "AUD" type = "number" Class = "Country" ID = "countryAustralia" list = "CommonVal" oninput = "validate(this);Process(event);" onClick = "Remove();" ></td>
</tr>
<tr class = "RowDesign">
<td class = "CountryName"><img class = "ImgText" src = "https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/Flag_of_Japan.svg/1280px-Flag_of_Japan.svg.png" alt = "Japan"><div class = "CountryText">Japan</div></td><br>
<td><INPUT type = "number" placeholder = "JPY" Class = "Country" ID = "countryJapaneseYen" list = "CommonVal" oninput = "validate(this);Process(event);" onClick = "Remove();"></td>
</tr>
<tr class = "RowDesign">
<td class = "CountryName"><img class = "ImgText" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/510px-Flag_of_the_People%27s_Republic_of_China.svg.png" alt = "ChineseYuan" height = "60px" width = "90px"><div class = "CountryText">China</div></td><br>
<td><INPUT type = "number" placeholder = "CNY" Class = "Country" ID = "countryChineseYuan" list = "CommonVal" onInput = "validate(this);Process(event);" onClick = "Remove();"></td>
</tr>
<tr class = "RowDesign">
<td class = "CountryName"><img class = "ImgText" src = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Flag_of_Indonesia.svg/510px-Flag_of_Indonesia.svg.png" alt = "IndonesianRupiah" ><div class = "CountryText">Indonesia</div></td><br>
<td><INPUT type = "number" placeholder = "IDR" Class = "Country" ID = "countryIndonesianRupiah" list = "CommonVal" step = "any" oninput = "validate(this);Process(event);" onClick = "Remove();" ></td>
</tr>
<Datalist ID = "CommonVal">
<option value=1>1</option>
<option value=10>10</option>
<option value=100>100</option>
<option value=500>500</option>
</Datalist>
</table>
</Section>
<SCRIPT LANGUAGE = "javascript" TYPE = "text/javascript">
var validate = function(e) {
var t = e.value;
//console.info(t)
/* e.value = (t.indexOf(".") >= 0) ? (t.substr(0, t.indexOf(".")) + t.substr(t.indexOf("."), 3)) : t; */
// console.info(e.value )
}
function Process(event) {
var AUS = 1; //CURENY RATE CAN BE CHAGNED BUT THE COUNTRIES IT SELF WON'T, ITS NOT A PART OF THE ASSIGNMENT.
var YEN = 82;
var YAUN = 5;
var RUPIAH = 10000;
var val = event.target.value;
var country = {
"Australia": AUS,
"JapaneseYen": YEN,
"ChineseYuan": YAUN,
"IndonesianRupiah": RUPIAH
};
var countRate;
if (event.target.id=='countryAustralia'){
countRate = AUS;
}
else if (event.target.id=='countryJapaneseYen'){
countRate = YEN;
}
else if (event.target.id=='countryChineseYuan'){
countRate = YAUN;
}
else if (event.target.id=='countryIndonesianRupiah'){
countRate = RUPIAH;
}
var text = "";
var i;
var rateMp = (val/countRate);
if (val>0){
for (var i in country) {
var currency = (rateMp* country[i]);
var input = document.querySelector('#country' + i); // select the input by it's ID, I used the country object to build the selector
if (event.target.id!='country' + i){
input.value = currency; // assign the calculated value to the input
}
}
}
else if (val= = ""){
for (var i in country) {
var currency = "";
var input = document.querySelector('#country' + i);
input.value = currency;
}
}
else if (val.toString()= = "0"){
for (var i in country) {
var currency = 0.00;
var input = document.querySelector('#country' + i);
input.value = currency;
}
}
}
function Remove(){}
</SCRIPT>
</BODY>
</HTML>Это работает так же, как вы хотите. Спасибо!
Что означает выражение if (event.target.id!='country' + I){}, которое делает
—
18.07.2019 07:35
В вашем случае, что происходило, когда вы вводите какое-то значение в определенное поле, оно также меняет значения других полей и того же поля, но на самом деле этого не должно происходить. Потому что, когда вы ставите, это должно отражать другое поле, не то же самое, поэтому я поставил условие. Я надеюсь, что это будет иметь смысл для вас, и надеюсь, что смогу понять для вас, что senerio
—
18.07.2019 08:14
что касается этого кода, я не могу ввести отрицательный символ
—
26.07.2019 08:15
Я имею в виду, что если вы попробуете поставить отрицательный знак, это не сработает.
—
26.07.2019 08:22
Другие вопросы по теме
Как выровнять кнопку по вертикали на панели навигации?
Угловая производительность: событие DOM вызывает ненужные вызовы функций
Панель навигации Bootstrap доступна для всех моих html-страниц
Настройка размера значка?
Как использовать значок в качестве кнопки для отправки img в php и sql
Как сделать разрыв страницы в rmarkdwn html?
Php, если пост isset и еще пост
Заголовок выпадающей таблицы скрыт таблицей
Расширение буфера обмена хром без отображения ввода
Фоновое изображение неправильно растянуто в Safari
Похожие вопросы
JQuery анимирует формы по нажатию кнопки
Vue.js удалить элемент при удалении
Как обновить состояние Reactjs данными, полученными с помощью вызова API fetch?
Панель навигации Bootstrap доступна для всех моих html-страниц
Получить временные интервалы от времени начала и окончания
Представление памяти функций в javascript
Как добавить элемент к существующему объекту
Angular — создание уникального идентификатора css для каждой ячейки таблицы
Как очистить массив объектов в реакции
Соглашения OpenCV Rect — что такое x, y, ширина, высота?
step = "any"к вашему входному тегу и разрешить десятичные знаки