资源

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来获取您的元素。

＆＃13;

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

＆＃13;

<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>

＆＃13;

资源

Answer 2

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

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

// java描述

<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。试试这段代码，点击按钮的打印值：

＆＃13;

B=[0 0 0 0]

＆＃13;

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

＆＃13;

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

belongs_to

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

如何将输入值复制到div？

5 个答案:

资源