如何将输入值复制到div？

Question

我现在开始学习JavaScript，但我仍然很困惑。 我在一个项目中需要执行以下示例中的工作：我有两个按钮：“ 蓝色 ”和“ 绿色 ”，当用户单击“ 蓝色 ”时，这将打印在div上，显示短语“ 颜色”蓝 “或” 绿颜色 “如果点击了” 绿色 ”。

这是我的HTML的示例：

  <p>Select:</p> <input value="blue" type="button" /> <input value="green" type="button" /> <div id="here-appears-thecolourchosen"></div> 

你能帮我吗？ 非常感谢你！

编辑：无需复制颜色名称，只需在选择短语时自定义短语即可。

Answer 1

• 使用功能addEventListener将事件绑定到您的元素。
• 使用以下函数querySelector和querySelectorAll获取您的元素。

 document.querySelector('[name="estados-mexico"]').addEventListener('change', function() { document.getElementById('here-appears-thestatechosen').innerHTML = `${this.value} - ${this.options[this.selectedIndex].innerText}` }); document.querySelectorAll('[type="button"]').forEach(function(e) { e.addEventListener('click', function() { document.getElementById('here-appears-thecolourchosen').innerHTML = this.value; }); }) 

 <p>Select:</p> <input value="blue" type="button" /> <input value="green" type="button" /> <br> <select name="estados-mexico"> <option value="AC">Acre</option> <option value="AL">Alagoas</option> <option value="AP">Amapá</option> </select> <div id="here-appears-thecolourchosen"></div> <div id="here-appears-thestatechosen"></div> 

资源资源

• document.querySelector()
• document.querySelectorAll()

Answer 2

<p>Select:</p>
<input value="blue" type="button" />
<input value="green" type="button" />

<div id="here-appears-thecolourchosen"></div>

// 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;
});
}

// jquery

<script>
$("input[type=button]").click(function(){
$("#here-appears-thecolourchosen").text($(this).val());
});
</script>

Answer 3

据我了解，您需要纯js。 尝试以下代码，其打印值来自单击的按钮：

 var buttons = document.getElementsByTagName('input'); for (var i = 0; i < buttons.length; i += 1) { buttons[i].addEventListener('click', function(){ document.getElementById('here-appears-thecolourchosen').innerText = 'The color is ' + this.value; }); } 

  <p>Select:</p> <input value="blue" type="button" /> <input value="green" type="button" /> <div id="here-appears-thecolourchosen"></div> 

Answer 4

尝试这个：

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';
    }
  })
}

Answer 5

 <p>Select:</p> <input value="blue" type="button" onclick="document.getElementById('colorChosen').innerText='blue'" /> <input value="green" type="button" onclick="document.getElementById('colorChosen').innerText='green'" /> <br> <select name="estados-mexico"> <option value="AC">Acre</option> <option value="AL">Alagoas</option> <option value="AP">Amapá</option> </select> <div id="colorChosen"></div> <div id="stateChosen"></div> 

我使用内联JS在第一个div内设置文本。 使用此示例，尝试找出如何处理状态的第二个问题。