Question

我正在构建下面的Javascript代码，主要用于练习。我是JS的新手，没有任何建立大型项目的经验，因此我将其作为一种超越初学者阶段并编写更有用/更有趣的代码的方式。 / p>

我想知道，如何从viewTemplate（）类的输入字段中获取值，然后将其传递给myo（）类的name参数？请参阅代码：

function Hero(name) {
    this.name = name;

    // all the methods normally live here ....

}

function viewTemplate() {
    this.template = document.querySelector('.stage');

    this.textInput = function(id, label) {
        this.label = document.createElement('label');
        this.label.setAttribute("for", id);
        this.label.innerHTML = label;
        this.input = document.createElement('input');
        this.input.setAttribute('type', 'text');
        this.input.setAttribute('value', '');
        this.input.setAttribute('id', id);
        this.template.appendChild(this.label);
        this.template.appendChild(this.input);
    }   

}


// Test cases
// Create a new template
var template = new viewTemplate();
template.textInput("form1", "Enter your name, oh heroic one!");

// Create a hero
var hero = new Hero("Ryan");

这是一个jsfiddle：https://jsfiddle.net/ray_silver/2jd6e7cr/

我是以正确的方式来做这件事的吗？我想从输入字段中获取值，当我按Enter键时，它应该将输入的值作为英雄的名称。

Answer 1

您可以使用Javascript中实现的事件侦听器。例如，这段代码可以添加到脚本的末尾。

var inputs = document.getElementsByTagName('input')[0]; 
inputs.addEventListener('keypress', function(e){    // keypress event
    var key = e.which || e.keyCode;  // determining which was pressed
    if (key === 13){                 // checking if the key pressed is Enter (keyCode 13 is Enter)
        hero.name = inputs.value;    // assigning input value to the object
        console.log(hero.name);      // testing
    }
});

获取输入值作为构造函数的参数 - Javascript

1 个答案: