简体   繁体   English

如何用 HTML 更改 javascript 变量?

[英]How to change a javascript variable with HTML?

I am making a chrome extension which adds icons to certain URLs, so I would like to make a slider to adjust the size of the icon in the popup.html .我正在制作一个 chrome 扩展,它将图标添加到某些 URL,所以我想制作一个 slider 来调整popup.html中图标的大小。

The HTML of the slider looks like this: slider 的 HTML 如下所示:

<div class="slidecontainer">
   <input type="range" min="1" max="3" value="2" class="slider" id="myRange">
</div>

But for the slider to work, it needs some javascript code.但是要使 slider 工作,它需要一些 javascript 代码。

In the javascript file, I made a variable called size .在 javascript 文件中,我创建了一个名为size的变量。 I need the javascript to change the size variable according to the position of the slider.我需要 javascript 根据 slider 的 position 更改size变量。

var size = "/images/icon16.png";
var imageURL = "chrome-extension://" + chrome.i18n.getMessage("@@extension_id") + size;

So I am thinking of a script that checks for myRange , and if it is 1 , 2 , or 3 , it sets size to corresponding string:所以我正在考虑一个检查myRange的脚本,如果它是123 ,它将size设置为相应的字符串:

  1. "/images/icon16.png"
  2. "/images/icon48.png"
  3. "/images/icon128.png"

The catch is that I don't know how to implement this in my code, so any help or explanation would mean the world to me...问题是我不知道如何在我的代码中实现这一点,所以任何帮助或解释对我来说都意味着世界......

You could save your strings in an array:您可以将字符串保存在数组中:

var myPaths = [
  "/images/icon16.png",
  "/images/icon48.png",
  "/images/icon128.png"
]

And access your slider input like this:并像这样访问您的 slider 输入:

var slider = document.getElementById("myRange");

so that slider.value will be the value of the input .这样slider.value将是input的值。

You could listen out for the change event on the slider, and then set your size variable accordingly.您可以监听 slider 上的change事件,然后相应地设置您的size变量。

Full code:完整代码:

var myPaths = [
  "/images/icon16.png",
  "/images/icon48.png",
  "/images/icon128.png"
];

var size = "/images/icon16.png";
var slider = document.getElementById("myRange");

slider.addEventListener("change", updateSize);

function updateSize() {
  size = myPaths[slider.value - 1];
}

In short: document.getElementById("myRange").value;简而言之: document.getElementById("myRange").value; . .

You can read more about sliders and getting the value of the slider here .您可以在此处阅读有关滑块和获取 slider 值的更多信息。 If you want to get the value every time the slider is utilised:如果您想在每次使用 slider 时获取该值:

document.getElementById("myRange").addEventListener("input", (evt) => {
  console.log(evt.target.value);
})
  1. Attach an onchange event listener to the input tag.onchange事件侦听器附加到input标记。
  2. Declare enum as follows:声明enum如下:
let enum = {
  1: "/images/icon16.png",
  2: "/images/icon48.png",
  3: "/images/icon128.png"
} 
  1. Write something like this in the callback:在回调中写下这样的内容:
var size,
    imageURL;

let enum = {
  1: "/images/icon16.png",
  2: "/images/icon48.png",
  3: "/images/icon128.png"
} 

let inputrange = document.querySelector('input[type=range]');

inputrange.addEventListner("change", function() {
  size = enum[inputrange.value];
  imageURL = `chrome-extension://${chrome.i18n.getMessage("@@extension_id") + size}` ;
}) ;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM