英文:
Managing more than one slider in HTML
问题
I'm new to html and recognize this may be a basic question. However I haven't been able to find any examples of this sort of functionality yet. I'm trying to do math with the input from two different sliders. Thus far, my code looks like this:
function f(x, y) {
return x + y
}
function sliderx(value) {
val = f(value, 1.0)
console.log(val)
}
<h1> Slider Test</h1>
<div id="myDiv"></div>
<p> sliderx </p>
<form oninput="amount.value=rangeInput.value">
<input type="range" id="rangeInput" name="rangeInput" step="0.05" min="0.0" max="1.0" value="get_min() " oninput="sliderx(this.value)">
<output name="amount" for="rangeInput"></output>
</form>
<p> slidery </p>
<form oninput="amount.value=rangeInput.value">
<input type="range" id="rangeInput" name="rangeInput" step="0.05" min="0.0" max="1.0" value="get_min() " oninput="slidery(this.value)">
<output name="amount" for="rangeInput"></output>
</form>
I created two sliders (sliderx and slidery) and defined f(x,y) = x+y. My goal is to be able to print x+y to console.log. I can call sliderx and my console updates accordingly for fixed y. However, I don't see any good way to update y using slidery, while keeping x defined by sliderx. Is there any way to do this?
英文:
I'm new to html and recognize this may be a basic question. However I haven't been able to find any examples of this sort of functionality yet. I'm trying to do math with the input from two different sliders. Thus far, my code looks like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function f(x, y) {
return x + y
}
function sliderx(value) {
val = f(value, 1.0)
console.log(val)
}
<!-- language: lang-html -->
<h1> Slider Test</h1>
<div id="myDiv"></div>
<p> sliderx </p>
<form oninput="amount.value=rangeInput.value">
<input type="range" id="rangeInput" name="rangeInput" step="0.05" min="0.0" max="1.0" value="get_min() " oninput="sliderx(this.value)">
<output name="amount" for="rangeInput"></output>
</form>
<p> slidery </p>
<form oninput="amount.value=rangeInput.value">
<input type="range" id="rangeInput" name="rangeInput" step="0.05" min="0.0" max="1.0" value="get_min() " oninput="slidery(this.value)">
<output name="amount" for="rangeInput"></output>
</form>
<!-- end snippet -->
I created two sliders (sliderx and slidery) and defined f(x,y) = x+y. My goal is to be able to print x+y to console.log. I can call silderx and my console updates accordingly for fixed y. However, I don't see any good way to update y using slidery, while keeping x defined by sliderx. Is there any way to do this?
答案1
得分: 2
<h2>是的，有解决您问题的方法！</h2>
<p>为了实现您的目标，您可以定义两个全局变量x和y，用于存储滑块的当前值，并在滑块值更改时更新它们。然后，您可以使用更新后的x和y值计算f(x, y)，并将结果记录到控制台。此外，正如您的注释中提到的，ID应该是唯一的，因此请为您的元素使用唯一的ID和名称。请参见：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=q, initial-scale=1.0" />
<title>Document</title>
<title>What's the date?</title>
</head>
<body>
<h1>Slider Test</h1>
<div id="myDiv"></div>
<p>sliderx</p>
<form oninput="amount.value=rangeInputX.value">
<input
type="range"
id="sliderx"
name="rangeInputX"
step="0.05"
min="0.0"
max="1.0"
value="get_min()"
oninput="update()"
/>
<output name="amount" for="sliderx"></output>
</form>
<p>slidery</p>
<form oninput="amount.value=rangeInputY.value">
<input
type="range"
id="slidery"
name="rangeInputY"
step="0.05"
min="0.0"
max="1.0"
value="get_min()"
oninput="update()"
/>
<output name="amount" for="slidery"></output>
</form>
<script>
// 使用当前起始值初始化您的滑块
let sliderx = document.getElementById("sliderx");
let slidery = document.getElementById("slidery");
let x = sliderx.value;
let y = slidery.value;
console.log(x, y);
function update() {
x = parseFloat(sliderx.value);
y = parseFloat(slidery.value);
const result = f(x, y);
console.log(
` ${x} (sliderx的值:) + ${y} (slidery的值) = ${result}`
);
}
function f(x, y) {
return x + y;
}
</script>
</body>
</html>
<!-- end snippet -->
在这个实现中，我们定义了两个全局变量x和y来存储滑块的当前值。每当滑块的值更改时，将调用update函数，该函数会更新x和y的值，计算f(x, y)，并将结果记录到控制台。使用滑块输入的oninput属性，每当任一滑块的值更改时都会调用update函数。output元素使用for属性与其对应的滑块输入相关联。
英文:
<h2>Yes, there is a solution for your problem!</h2>
<p>To achieve your goal, you can define two global variables x and y to store the current values of the sliders, and update them whenever the slider values change. Then, you can calculate f(x,y) using the updated values of x and y, and log the result to the console. Also as your comments also mentioned IDs should be unique so stick with unique IDs and names for your elements. See:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=q, initial-scale=1.0" />
<title>Document</title>
<title>What's the date?</title>
</head>
<body>
<h1>Slider Test</h1>
<div id="myDiv"></div>
<p>sliderx</p>
<form oninput="amount.value=rangeInputX.value">
<input
type="range"
id="sliderx"
name="rangeInputX"
step="0.05"
min="0.0"
max="1.0"
value="get_min()"
oninput="update()"
/>
<output name="amount" for="sliderx"></output>
</form>
<p>slidery</p>
<form oninput="amount.value=rangeInputY.value">
<input
type="range"
id="slidery"
name="rangeInputY"
step="0.05"
min="0.0"
max="1.0"
value="get_min()"
oninput="update()"
/>
<output name="amount" for="slidery"></output>
</form>
<script>
//Initialize your sliders with current start values
let sliderx = document.getElementById("sliderx");
let slidery = document.getElementById("slidery");
let x = sliderx.value;
let y = slidery.value;
console.log(x, y);
function update() {
x = parseFloat(sliderx.value);
y = parseFloat(slidery.value);
const result = f(x, y);
console.log(
` ${x} (Value of sliderx:) + ${y} (Value of slidery) = ${result}`
);
}
function f(x, y) {
return x + y;
}
</script>
</body>
</html>
<!-- end snippet -->
In this implementation, we define two global variables x and y to store the current values of the sliders. Whenever a slider value changes, the update function is called, which updates the values of x and y, calculates f(x,y), and logs the result to the console. The update function is called whenever either slider value changes, using the oninput attribute of the slider inputs. The output elements are associated with their corresponding slider inputs using the for attribute.
答案2
得分: -1
以下是您要翻译的内容：
function f(x, y) {
return x + y
}
function sliderx(value) {
let val = f(value, 1.0)
console.log(val)
}
function slidery(value) {
let val = f(value, 1.0)
console.log(val)
}
<h1>滑块测试</h1>
<div id="myDiv"></div>
<p>sliderx</p>
<form oninput="amount.value=rangeInput.value">
<input type="range" id="rangeInput" name="rangeInput" step="0.05" min="0.0" max="1.0" value="get_min() " oninput="sliderx(this.value)">
<output name="amount" for="rangeInput"></output>
</form>
<p>slidery</p>
<form oninput="amountY.value=rangeInputY.value">
<input type="range" id="rangeInputY" name="rangeInputY" step="0.05" min="0.0" max="1.0" value="get_min() " oninput="slidery(this.value)">
<output name="amountY" for="rangeInputY"></output>
</form>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function f(x, y) {
return x + y
}
function sliderx(value) {
let val = f(value, 1.0)
console.log(val)
}
function slidery(value) {
let val = f(value, 1.0)
console.log(val)
}
<!-- language: lang-html -->
<h1> Slider Test</h1>
<div id="myDiv"></div>
<p> sliderx </p>
<form oninput="amount.value=rangeInput.value">
<input type="range" id="rangeInput" name="rangeInput" step="0.05" min="0.0" max="1.0" value="get_min() " oninput="sliderx(this.value)">
<output name="amount" for="rangeInput"></output>
</form>
<p> slidery </p>
<form oninput="amountY.value=rangeInputY.value">
<input type="range" id="rangeInputY" name="rangeInputY" step="0.05" min="0.0" max="1.0" value="get_min() " oninput="slidery(this.value)">
<output name="amountY" for="rangeInputY"></output>
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论