Попытка манипулировать информацией о классе после ввода от пользователя

Question

Я в основном пытаюсь научиться принимать пользовательские данные и отображать их на основе информации о классе, которую я уже настроил. Другими словами, я хочу, чтобы ввод пользователя стал частью строки, сгенерированной из информации о классе. В настоящее время я получаю строку в браузере, но получаю «ноль» вместо ввода пользователя, когда нажимаю кнопку. Кто-нибудь может сказать мне, что я делаю не так?

class Vehicle{
//Set up object
  constructor(color, direction, currentSpeed, topSpeed, engineStarted){
    this._color = color;
    this._direction = direction;
    this._currentSpeed = currentSpeed;
    this._topSpeed = topSpeed;
    this._engineStarted = true;
  }
						
  accelerate(){
    return `Car is now travelling @ ${this._currentSpeed} mph.`;
  }
}

let input = document.getElementById('input1');
let myCar2 = new Vehicle("Green", 233, input, 90);
function whatsTheSpeed() {
  document.getElementById('display').innerHTML +=  myCar2.accelerate();
}

<div id="info">
  <input type="text" id="input1">
  <button onclick="whatsTheSpeed()">Speed</button>
</div>
<div id="display"></div>

Answer 1

Переменная input выбирает элемент <input>. Но так как вы получаете значение null в результате, это, вероятно, означает, что ваш скрипт выполняется до HTML, который вы пытаетесь выбрать. Сначала убедитесь, что у вас есть элементы HTML, а внизу страницы - тег <script> с этим сценарием.

Затем, когда document.getElementById('input1'); дает элемент, используйте value свойство этого элемента для получения текущего value на входе.

Если вы хотите, чтобы ваша машина обновляла скорость каждый раз, когда вы нажимаете, вам нужно обновить свой экземпляр в функции whatsTheSpeed.

class Vehicle{
//Set up object
  constructor(color, direction, currentSpeed, topSpeed, engineStarted){
    this._color = color;
    this._direction = direction;
    this._currentSpeed = currentSpeed;
    this._topSpeed = topSpeed;
    this._engineStarted = true;
  }

  setSpeed(speed) {
    this._currentSpeed = speed;
  }
						
  accelerate(){
    return `Car is now travelling @ ${this._currentSpeed} mph.`;
  }
}

let input = document.getElementById('input1');
let myCar2 = new Vehicle("Green", 233, input.value, 90);

function whatsTheSpeed() {
  myCar2.setSpeed(input.value);
  document.getElementById('display').innerHTML =  myCar2.accelerate();
}

<div id="info">
  <input type="text" id="input1">
  <button onclick="whatsTheSpeed()">Speed</button>
</div>
<div id="display"></div>

Answer 2

class Vehicle{
//Set up object
  constructor(color, direction, currentSpeed, topSpeed, engineStarted){
    this._color = color;
    this._direction = direction;
    this._currentSpeed = currentSpeed;
    this._topSpeed = topSpeed;
    this._engineStarted = true;
  }
						
  accelerate(){
     let input = document.getElementById('input1').value;
    return 'Car is now travelling @ ' + input + ' mph.';
  }
}


let myCar2 = new Vehicle("Green", 233, 20, 90);
function whatsTheSpeed() {
  document.getElementById('display').innerHTML +=  myCar2.accelerate();
}

<div id="info">
  <input type="text" id="input1">
  <button onclick="whatsTheSpeed()">Speed</button>
</div>
<div id="display"></div>

Answer 3

Попробуйте использовать input.value вместо input

let input = document.getElementById('input1').value;