Javascript 如何将输入值复制到div？

我现在开始学习JavaScript，我仍然很困惑。 我正在做一个项目，我需要以下示例中的一些内容：我有两个按钮：“蓝色”和“绿色”，当用户单击“蓝色”时，这会打印在一个div上，如果单击，会显示短语“蓝色”或“绿色”“绿色”

以下是我的HTML示例：

选择：

选择：



英亩
阿拉戈斯
阿马帕

• 使用函数

  addEventListener

  将事件绑定到元素
• 使用以下函数

  querySelector

  和

  queryselectoral

  获取元素

document.querySelector（'[name=“estados mexico”]'）。addEventListener（'change'，function（）{
document.getElementById（'here-embes-TheStateSelected'）。innerHTML=`${this.value}-${this.options[this.selectedIndex].innerText}`
});
document.querySelectorAll（'[type=“button”]'）.forEach（函数（e）{
e、 addEventListener（'单击'，函数（））{
document.getElementById（'here-embes-thecolourchosen'）。innerHTML=this.value；
});
})

选择：



英亩
阿拉戈斯
阿马帕

选择：

//javascript

<script>
var btn=document.querySelectorAll("input[type=button]");
for(var i=0;i<btn.length;i++){
btn[i].addEventListener("click",function(e){
document.getElementById("here-appears-thecolourchosen").innerText="the color 
"+this.value;
});
}

var btn=document.queryselectoral（“输入[type=button]”）；
对于（var i=0；i尝试以下方法：

var btns = document.querySelectorAll('INPUT');
var div = document.getElementById('here-appears-thecolourchosen');

for(var i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function() {
    if(this.value === 'blue') {
      div.textContent = 'The Color Blue';
    }
    else if (this.value === 'green') {
       div.textContent = 'The Color Green';
    }
  })
}

var btns=document.querySelectorAll（'INPUT'）；
var div=document.getElementById（'here-diseased-thecolourchosen'）；
对于（变量i=0；i
据我所知，您需要纯js。请尝试此代码，其打印值来自单击的按钮：


var buttons=document.getElementsByTagName（'input'）；
对于（变量i=0；i

选择：

你已经尝试过什么？如果有人在学习JavaScript，首先不应该向他们展示一个远离任何理智的现代实践的解决方案。内联JS必须走了。我知道。但一般来说，我通过查看示例并试图理解他们的想法来了解更多logic@RandyCasburn我明白你的意思，我的意思注意不要用脚本块、等待DOM完成、订阅事件等不必要地混淆OP。欢迎。如果您觉得有帮助，请将其作为答案
<script>
$("input[type=button]").click(function(){
$("#here-appears-thecolourchosen").text($(this).val());
});
</script>

var btns = document.querySelectorAll('INPUT');
var div = document.getElementById('here-appears-thecolourchosen');

for(var i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function() {
    if(this.value === 'blue') {
      div.textContent = 'The Color Blue';
    }
    else if (this.value === 'green') {
       div.textContent = 'The Color Green';
    }
  })
}