Как исправить таблицу изменения значений на основе числа, которое существует на той же странице

Question

Мне нужно создать таблицу, которая будет показывать 6 значений в нем. Эти 6 значений должны быть изменены на основе одного номера, который доступен на этой странице в. Позволяет позвонить на этот номер X . Это означает, что когда X попадает в некоторые диапазоны (которых должно быть 13), все 6 цен должны быть изменены одновременно. Это означает, что варианты n (количество диапазонов) = количество сценариев, потому что , если X находится в одном диапазоне, он изменяет все 6 цен в одном.

У меня есть 2 проблемы (я не очень хорош в JS, и я планирую использовать эту задачу в качестве отправной точки для изучения):

1. Я пытался составить таблицу, но изо всех сил пытался понять, как сделать значение числа X в переменной.
2. Если этот подход с, если еще хорошо, потому что он выглядит довольно общим для меня, и я буду огромен, тогда добавьте все 13 диапазонов.

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-s268{text-align:left}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="column-title-1"></th>
    <th class="column-title-2">Summer</th>
    <th class="column-title-3">Winter</th>
  </tr>
  <tr>
    <td class="row-title-1">Store 1</td>
    <td id="premium-price-1">no price</td>
    <td id="premium-price-2">no price</td>
  </tr>
  <tr>
    <td id="row-title-2">Store 2</td>
    <td id="deductible-price-1">no price</td>
    <td id="deductible-price-2">no price</td>
  </tr>

    <tr>
    <td id="row-title-3">Store 3</td>
    <td id="replacement-price-1">no price</td>
    <td id="replacement-price-2">no price</td>
  </tr>

</table>

<!-- AVAILABLE SOMEWHERE ON THE PAGE--><p><span id="price-amount">240</span></p>

var loose = document.getElementsByClassName("price-amount");

if (100 < loose && loose < 200) {
document.getElementById("premium-price-1").innerHTML = "18";
document.getElementById("premium-price-2").innerHTML = "20";
document.getElementById("deductible-price-1").innerHTML = "120";
document.getElementById("deductible-price-2").innerHTML = "130";
document.getElementById("replacement-price-1").innerHTML = "200";
document.getElementById("replacement-price-2").innerHTML = "220";
} else if (200 < loose && loose < 300) {
 document.getElementById("premium-price-1").innerHTML = "22";
document.getElementById("premium-price-2").innerHTML = "25";
document.getElementById("deductible-price-1").innerHTML = "125";
document.getElementById("deductible-price-2").innerHTML = "135";
document.getElementById("replacement-price-1").innerHTML = "220";
document.getElementById("replacement-price-2").innerHTML = "230";
} else {
document.getElementById("premium-price-1").innerHTML = "25";
document.getElementById("premium-price-2").innerHTML = "29";
document.getElementById("deductible-price-1").innerHTML = "130";
document.getElementById("deductible-price-2").innerHTML = "145";
document.getElementById("replacement-price-1").innerHTML = "240";
document.getElementById("replacement-price-2").innerHTML = "270";
}

Вот JSFiddle с кодом: https://jsfiddle.net/fxbopt1h/

Идея, лежащая в основе всего этого, заключается в том, чтобы размещать их на разных страницах и основывать на значении X каждой страницы, чтобы отображать правильные 6 цифр в таблице.

Я надеюсь, что я все объясню, и я знаю, может быть, это глупый подход, но, пожалуйста, помогите мне сделать это правильно.

Answer 1

Чтобы получить значение, лучше поместить туда ввод, а не диапазон

<input id="price-amount" type="number"/>

и чтобы получить это значение, вы можете просто сделать это

var loose = document.getElementById("price-amount").value;

Если шаблон отсутствует, мы не можем выполнить функцию, которая рассчитывает цены, поэтому вам придется добавить их вручную (или при необходимости получить из базы данных).

Но что мы можем сделать, это добавить функцию, в которую вы передадите ей цены, это даст нам только 1 функцию для написания и IF:

var loose = document.getElementById("price-amount").value;

function setPrices(p1, p2, p3, p4, p5, p6) {
  document.getElementsById('premium-price-1').textContent = p1;
  document.getElementsById('premium-price-2').textContent = p2;
  document.getElementsById('deductible-price-1').textContent = p3;
  document.getElementsById('deductible-price-2').textContent = p4;
  document.getElementsById('replacement-price-1').textContent = p5;
  document.getElementsById('replacement-price-2').textContent = p6;
}

После того, как вы настроили функцию, теперь вы можете просто вызвать функцию с правильными параметрами, чтобы изменить цены в своих IF'ах

if (100 < loose && loose < 200) {
  setPrices(18, 20, 120, 130, 200, 220);
} else if (200 < loose && loose < 300) {
  setPrices(22, 25, 125, 135, 220, 230);
} else {
  setPrices(25, 29, 130, 140, 240, 270)
}

Таким образом, если вам нужно изменить функцию, вы делаете это только в одном месте, и она более читаема, просто убедитесь, что вы передали правильные числа в правильном порядке для функции.

ПРИМЕЧАНИЕ. - обратите внимание, что ваши диапазоны IFs составляют всего 200 > x < 300, поэтому, если цена будет ровно 200, она перейдет в другое, а не в диапазон, чтобы изменить его, вам нужно а также тест на равенство 200 >= x <= 300.

if (loose >= 100 && loose < 200) {} else if (loose >= 200 && loose < 300) {}

Обновление

Если вы не можете изменить часть диапазона, вам нужно получить его текст.

var loose = document.getElementById("price-amount").textContent;

рабочая скрипка: https://jsfiddle.net/b9suq0pg/9/

Обновление 2

Вам также нужно проверить, является ли промежуток числом, чтобы убедиться, что никаких ошибок не появится.

if (! IsNaN (свободный)) {}

рабочая скрипка: https://jsfiddle.net/b9suq0pg/10/