I have some code on my website that updates an element based on the value of a price slider.

我在我的网站上有一些代码，根据价格滑块的值更新元素。

$("#te_li_yr_seats_html").html(te_li_yr_price.innerHTML/215)

The above code is working fine, and #te_li_yr_seats_html will always be a number between 2 and 8.

上面的代码工作正常，#te_li_yr_seats_html将始终是2到8之间的数字。

I want to update a second element based on this calculated value.

我想要基于这个计算值更新第二个元素。

I've added my full code below and then a pseudo code snippet of what I'm trying to do. I hope that's clear.

我在下面添加了完整的代码，然后添加了我想要做的事情的伪代码片段。我希望你说得很清楚。

Thank you in advance for any help.

事先感谢您的帮助。

var te_li_yr_price = document.getElementById("te_li_yr_price_base");
var te_li_yr_slider = document.getElementById("te_li_yr_slider");

te_li_yr_price.innerHTML = te_li_yr_slider.value;

te_li_yr_slider.oninput = function() {
te_li_yr_price.innerHTML = this.value;

$("#te_li_yr_price_html").html(te_li_yr_price.innerHTML.replace(/\B(?=(\d{3})+(?!\d))/g, ","))
$('input[id="te_li_yr_price_form"]').val(te_li_yr_price.innerHTML)

$("#te_li_yr_seats_html").html(te_li_yr_price.innerHTML/215)
$('input[id="te_li_yr_seats_form"]').val(te_li_yr_price.innerHTML/215)


/* PSEUDO CODE BELOW */

if $("#te_li_yr_seats_html").html = 2 then
my_new_variable = 70

elseif $("#te_li_yr_seats_html").html = 3 then
my_new_variable = 100

elseif $("#te_li_yr_seats_html").html = 4 then
my_new_variable = 130

elseif $("#te_li_yr_seats_html").html = 5 then
my_new_variable = 160

elseif $("#te_li_yr_seats_html").html = 6 then
my_new_variable = 190

elseif $("#te_li_yr_seats_html").html = 7 then
my_new_variable = 220

elseif $("#te_li_yr_seats_html").html = 8 then
my_new_variable = 250

/* then apply to HTML */
$("#my_new_variable_html").html(my_new_variable)

The whole thing is hard to grasp, but here is a version that is easier to change. Note I have converted all the script to jQuery instead of mixing it with plain JS DOM access

整件事很难理解，但这里有一个更容易改变的版本。注意，我已经将所有脚本转换为jQuery，而不是将其与普通的JSDOM访问混合在一起

I am using a ternary for the lookup to make sure that you do not get an error if the perSeat is larger than the lookup table

我使用三元组进行查找，以确保如果perSeat大于查找表，则不会出现错误

const $te_li_yr_price = $("#te_li_yr_price_base");
const $te_li_yr_slider = $("#te_li_yr_slider");
const $te_li_yr_price_html = $("#te_li_yr_price_html");
const $te_li_yr_price_form = $("#te_li_yr_price_form");
const $te_li_yr_seats_html = $("#te_li_yr_seats_html");
const $te_li_yr_seats_form = $("#te_li_yr_seats_form");
const $my_new_variable_html = $("#my_new_variable_html");

const lookup = [0, 0, 70, 100, 130, 160, 190, 220, 250];

$te_li_yr_slider.on("input", function() {
  let val = this.value; // string
  let formattedVal = val.replace(/\B(?=(\d{3})+(?!\d))/g, ","); // now with thousand separators
  let perSeat = parseInt(val / 215);
  $te_li_yr_price.html(val);
  $te_li_yr_price_html.html(formattedVal);
  $te_li_yr_price_form.val(te_li_yr_priceval);
  $te_li_yr_seats_html.html(perSeat);
  $te_li_yr_seats_form.val(perSeat);
  // if perSeat is <2 or outside the lookup table, give default value
  $my_new_variable_html.html(
    perSeat < 2 || perSeat >= lookup.length ? val : lookup[perSeat]
  );
}).trigger("input"); // initialise