Javascript 如何模拟用户在输入和按钮元素上的交互？

我这里有一个代码

基本上有一个简单的表单，带有一个输入和一个按钮。按下按钮将把输入的当前值复制到标签上：

单击后：

html:

我必须只使用本机JS代码模拟用户交互。 因此，我尝试以下方法（例如在浏览器控制台中）：

问题是：

我得到了标签中的默认值，而不是当前值。如何获得正确的值？我怀疑这是周围的东西，但无法找出这里的问题所在

更新：我尝试了以下方法，但也没有成功

element = document.getElementById('inputID')
element.value = "aNewValue"; 
var ev = new Event('change', {
    view: window, 
    bubbles: true,
    cancelable: true,
  });
element.dispatchEvent(ev);
document.getElementById('buttonID').click();

---

Angular会在

输入

事件时更新模型。您应该在设置值后手动触发它

inputElement=document.getElementById（'inputID'）；
ButtoneElement=document.getElementById（'buttonID'）；
inputElement.value=“aNewValue”；
inputElement.dispatchEvent（新事件（'input'）{
视图：窗口，
泡泡：是的，
可取消：正确
}))
按钮元素。单击（）；

这不会发生，因为模型未更新。angular不知道您在使用dom propertyYeah做什么，我也这么怀疑，但我如何才能模拟交互，让应用程序注意到输入字段中的更改？很遗憾，我无法使用jQuery，也无法触发输入更改事件。。。我甚至不确定Angular2+中是否相同。这非常有效，谢谢。对于任何有相同问题的人来说：重要的是要理解，在不同的框架中，在幕后传播更改的事件类型可能不同。（“变更”事件为例）

  labelValue = "";
  inputValue = "defaultValue";

  set(){
    this.labelValue = JSON.parse(JSON.stringify(this.inputValue));
  }

 - document.getElementById('inputID').value = "aNewValue"; 
 - document.getElementById('buttonID').click();

element = document.getElementById('inputID')
element.value = "aNewValue"; 
var ev = new Event('change', {
    view: window, 
    bubbles: true,
    cancelable: true,
  });
element.dispatchEvent(ev);
document.getElementById('buttonID').click();