英文:
Use a variable to find another variable?
问题
我一直在开发一个涉及用户通过<input>元素输入的程序，并希望根据他们输入的内容更改不同的变量，类似于以下方式：
var input = document.getElementById('myInput').value;
var a = "ac";
var b = "bc";
var c = "cc";
alert(input); // 其中 input 在运行时被输入的内容替换，所以如果输入 a，它会弹出 "ac"
显然，上面的示例不起作用，但是否有一种方法可以让它起作用？
英文:
I have been working on a program involving user input via an <input> element, and wanted to do something where depending on what they typed, it changed a different variable, with something like this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var input = document.getElementById('myInput').value;
var a = "ac";
var b = "bc";
var c = "cc";
alert(input)//Where input is replaced once ran with what is inputed, so if a is typed it alerts "ac"
<!-- language: lang-html -->
<input id="myInput" type="text" value="a" />
<!-- end snippet -->
Obviously, the above example does not work, but is there a way where it would?
答案1
得分: 1
你可以将所有变量放入一个对象中，然后根据输入动态访问其属性。
const obj = {
a: "ac",
b: "bc",
c: "cc"
};
document.querySelector('button').addEventListener('click', e => {
const val = document.getElementById('myInput').value;
console.log(obj[val]);
});
<input id="myInput" type="text" value="a" />
<button>获取值</button>
英文:
You can put all the variables in an object instead and dynamically access its properties based on the input.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const obj = {
a: "ac",
b: "bc",
c: "cc"
};
document.querySelector('button').addEventListener('click', e => {
const val = document.getElementById('myInput').value;
console.log(obj[val]);
});
<!-- language: lang-html -->
<input id="myInput" type="text" value="a" />
<button>Get value</button>
<!-- end snippet -->
答案2
得分: 0
以下是您要翻译的内容：
超简单版本，但您可能需要更多处理不匹配/无匹配等情况。
这里我在输入上放了一个事件监听器，用于检查变化，然后进行比较，只有在以输入开头时才会触发警报。也可以尝试“ac”等。
function checkStartsWith(value, arrayValue) {
return arrayValue.startsWith(value);
}
document.getElementById('myInput')
.addEventListener('change', function(event) {
let inputValue = this.value;
const values = [
"ac", "bc", "cc"
];
values.forEach((element) => {
let hasValue = checkStartsWith(inputValue, element);
console.log(hasValue, element);
if (hasValue) {
alert(element);
}
});
});
<input id="myInput" type="text" /> 输入一些内容
希望这对您有帮助。
英文:
Super simple version but you probably need more for mismatches/no matches etc.
Here I put an event listener on the input for change and then ran a comparison, only alerting when it started with the input. Try also "ac" etc.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function checkStartsWith(value, arrayValue) {
return arrayValue.startsWith(value);
}
document.getElementById('myInput')
.addEventListener('change', function(event) {
let inputValue = this.value;
const values = [
"ac", "bc", "cc"
];
values.forEach((element) => {
let hasValue = checkStartsWith(inputValue, element);
console.log(hasValue, element);
if (hasValue) {
alert(element);
}
});
});
<!-- language: lang-html -->
<input id="myInput" type="text" /> enter something
<!-- end snippet -->
答案3
得分: 0
Solution - 添加一个事件监听器到输入字段，然后我们可以使用它来检查用户输入并显示所需的警报。
我已经将解决方案添加到这个 CodeSandbox - https://codesandbox.io/s/nostalgic-bessie-tp8vnn
英文:
Solution - Add an event listener to the input field, which we can then use to check for user input and display the required alert.
I have added the solution to this CodeSandbox - https://codesandbox.io/s/nostalgic-bessie-tp8vnn
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论