javascript - 如何创建最多 8 个 <input type ="button"> 值 A、B、C 等？

Question

我正在尝试最多创建 8 个按钮，并且我成功了，但我想为按钮指定 A、B、C 等值。这是我到目前为止所做的代码:

var buttonValue = 1;
function addButton(){
   if(buttonValue <=8){
      var targetDiv = document.getElementById('targetDiv');
      var inputField = document.createElement('INPUT');
      inputField.setAttribute('type','button');
      inputField.setAttribute('id',"input-"+buttonValue+"");
      inputField.setAttribute('class','controls');
      targetDiv.append(inputField);      
   }
   buttonValue++;
}

Answer 1

but I want to give the values to the buttons as A, B, C and so on.

A 的字符代码为 65 ("A".charCodeAt(0))。因此，您可以使用 String.fromCharCode 通过将 buttonValue - 1 添加到 65 来创建值:

inputField.setAttribute("value", String.fromCharCode(65 + buttonValue - 1));
// or
inputField.defaultValue = String.fromCharCode(65 + buttonValue - 1);
// or
inputField.value = String.fromCharCode(65 + buttonValue - 1);
// See below for details on .value vs. .defaultValue

<小时/>

顺便说一句，通过使用 type、id 和 class 属性的反射属性，您可以节省相当多的输入时间:

inputField.type = 'text';
inputField.id = "input-" + buttonValue;
inputField.className = 'controls';
//         ^^^^^^^^^ Note the slightly-different name

(另请注意，id 代码中不需要 +""。)

对于值来说，有点复杂:

• .value = ... 设置输入的当前值，该值与值不同 属性
• 值 属性设置输入的默认值，而不是其当前值。
• 值属性的反射属性是defaultValue，而不是value