根据用户输入更新网页答案

【问题标题】：Update a webpage depending on user inputs根据用户输入更新网页
【发布时间】：2013-06-06 06:42:45
【问题描述】：

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

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

如果可能的话，我更喜欢使用 javascript 来执行此操作。如果有任何指向现有模板的链接，我将不胜感激。

亲切的问候

【问题讨论】：

标签： java javascript html button controls

【解决方案1】：

这样的事情很容易做到：

演示：http://jsfiddle.net/WXgRP/

HTML：

<p id='changeme'>Blah</p>
<a href='#'>Banana</a>
<a href='#'>Apples</a>

JS：

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

那么这是做什么的，是el通过Tag名称获取页面中的所有元素，你可以随意修改它来获取我的类名，属性，id

[].forEach.call 为 NodeList 提供 forEach 的 this 值，因此在每个循环中您都可以访问它们的属性，每个循环设置 a 链接以将元素的 innerHTML 设置为您的文本给了一个链接。

【讨论】：

完成 :) 我是 SO 新手，仍在学习这里的工作方式。

【解决方案2】：

这个问题可以通过简单的网络搜索来解决，但我会发布一个答案，因为 SO 往往在结果中排名很高。

这是一些 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>

这里是 JavaScript（使用 jQuery）：

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

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

JavaScript 执行以下操作：

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

输入点击时调用函数，所以this指的是输入，其值包含水果的名称。

$('#selection') 表示 id 属性为“selection”的 DOM 元素。在我们的例子中，这是标题 h1。

.html 方法在传递参数时会将参数 (this.value) 分配给标题元素的内部 HTML。

【讨论】：