Java 根据用户输入更新网页

我有一个非常简单的问题，我正在寻找关于hello world类型的教程：

我的目标是根据外部因素改变网页的一部分。所以，在这个例子中，在网站上有一个文本块，上面写着“苹果”。如果点击“香蕉”按钮，该文本现在显示“香蕉”，如果按下“梨”按钮，则显示“梨”

如果可能的话，我更愿意使用javascript来实现这一点。如果有现成模板的链接，我将不胜感激

---

亲切问候

这样的事情很容易做到，比如：

演示：

HTML:

这样做的目的是，el通过标记名获取页面中的所有元素，您可以随意修改它以获取我的类名、属性和id

---

[].forEach.call

为

forEach

提供节点列表的

this

值，因此在每个循环中，您可以访问它们的属性，每个循环设置

a

链接，将元素的

innerHTML

设置为您提供给a链接的文本。

这个问题可以通过简单的web搜索解决，但我会发布一个答案，因为这样的结果往往排名很高

以下是一些HTML：

<label><input type="radio" value="Apple" name="fruit"/>Apple</label>
<label><input type="radio" value="Banana" name="fruit"/>Banana</label>
<label><input type="radio" value="Pear" name="fruit"/>Pear</label>
<h1 id="selection"></h1>

请注意，如果这是您唯一需要做的事情，我不会使用jQuery，但是如果您的网站有很多交互方面，那么jQuery将使您的生活更加轻松

JavaScript执行以下操作：

将事件处理程序分配给所有输入元素，以便在单击它们时调用函数

该输入在单击时调用函数，因此

此

引用其值包含水果名称的输入

$（“#selection”）

表示id属性为“selection”的DOM元素。在本例中，这是标题

h1

.html

方法在传递参数时，会将参数（

this.value

）分配给heading元素的内部html。

Done:）我不熟悉SO，仍然在学习如何在这里完成工作。

el = document.getElementsByTagName('a');
[].forEach.call(el, function(ele, index, arr) {
    ele.onclick = function() {
        document.getElementById('changeme').innerHTML = ele.innerHTML;   
    }
});

<label><input type="radio" value="Apple" name="fruit"/>Apple</label>
<label><input type="radio" value="Banana" name="fruit"/>Banana</label>
<label><input type="radio" value="Pear" name="fruit"/>Pear</label>
<h1 id="selection"></h1>

$('input').bind('click', function () {
    $('#selection').html(this.value);
});