如何解决html中嵌入的多个Javascript函数
我正在尝试在 HTML 中实现两个滑块，并使用 Javascript 函数来更新这些滑块值的指示器。我不知道如何为每个滑块的输出构建代码。我认为嵌入 Javascript 代码的方式存在问题。有谁知道我该如何解决这个问题？
目的：在 HTML 中有两个带有两个独立指示器的滑块
谢谢！
<body>
<h1>Round Range Slider</h1>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange1">
<p>Value1: <span id="demo1"></span></p>
</div>
</body>
<head>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
<script>
var slider = document.getElementById("myRange1");
var output = document.getElementById("demo1");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
</head>解决方法
复制代码，考虑到小改动的引入 - 是不好的。
我用 forEach() 方法给你写了一个 js 代码。这意味着现在您可以控制多个 input 而无需为每个编写 js 逻辑。
用这个替换你的js代码：
let input = document.querySelectorAll('.slidecontainer input');
let result = document.querySelectorAll('.slidecontainer span');
input.forEach(function(input_current,index) {
input_current.oninput = function() {
result[index].innerHTML = this.value;
}
});
在单独的 version: '3.8'
services:
nginx:
build:
context: ./nginx
dockerfile: ./Dockerfile
ports:
- 1300:80
depends_on:
- backend
networks:
- backend-tier
volumes:
# shared volume between nginx,worker,beat and backend for media
- app-media:/app/my_app_name/media/
backend:
expose:
- 8000
build:
context: .
dockerfile: ./Dockerfile
args:
STATIC_URL: '/static/'
restart: unless-stopped
depends_on:
- db
- redis
networks:
- backend-tier
volumes:
- ./my_app_name/:/app/my_app_name:Z,cached
- ./my_app_name/templates/:/app/my_app_name/templates:Z,cached
# shared volume between nginx,beat and backend for media
- app-media:/app/my_app_name/media/
db:
image: library/postgres:11.1-alpine
ports:
- 5439:5432
restart: unless-stopped
networks:
- backend-tier
volumes:
- valor-db:/var/lib/postgresql/data
environment:
- POSTGRES_USER=myuser
- POSTGRES_PASSWORD=mypassword
- POSTGRES_DB=mydb
redis:
image: library/redis:5.0-alpine
ports:
- 6379:6379
restart: unless-stopped
networks:
- backend-tier
volumes:
- valor-redis:/data
worker:
build:
context: .
dockerfile: ./Dockerfile
args:
STATIC_URL: '/static/'
command: celery -A config --app=config.celery_app:app worker --loglevel=info
restart: unless-stopped
depends_on:
- redis
networks:
- backend-tier
volumes:
- ./my_app_name/:/app/my_app_name:Z,beat and backend for media
- app-media:/app/my_app_name/media/
env_file: common.env
beat:
build:
context: .
dockerfile: ./Dockerfile
args:
STATIC_URL: '/static/'
command: celery -A config --app=config.celery_app:app beat --loglevel=info
restart: unless-stopped
depends_on:
- redis
networks:
- backend-tier
volumes:
- ./my_app_name/:/app/my_app_name:Z,beat and backend for media
- app-media:/app/my_app_name/media/
env_file: common.env
volumes:
app-db:
driver: local
app-redis:
driver: local
app-media:
networks:
backend-tier:
driver: bridge
标签中声明变量不会创建变量的两个副本。您可以通过为每个滑块指定不同的名称来为它们声明一个变量。
script更好的是，使用循环：
<body>
<h1>Round Range Slider</h1>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50"
class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50"
class="slider" id="myRange1">
<p>Value1: <span id="demo1"></span></p>
</div>
</body>
<head>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
var slider1 = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");
output1.innerHTML = slider1.value;
slider1.oninput = function() {
output1.innerHTML = this.value;
}
</script>
</head>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
