使用JavaScript返回click-li项目的值，并用结果填充文本区域

Using JavaScript to return the value of the click li item and populating the textarea with the result

本文关键字：结果 填充 区域 文本 返回 JavaScript click-li 项目 使用      更新时间：2023-09-26

在我的一生中，我找不到一种无jQuery的方法来获得点击的li项目的值，并用点击的结果填充文本区域框id="result"。

如何做到这一点？这在我看来像是火箭科学

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
    width: 200px;
    float: left;
    font-family: Arial;
    font-size: 10pt;
    position:relative;
}
#one {
    height: 200px;
    border: 1px solid red;
    display: none;
    position:absolute;
    background: #C0C0C0;
}
#two {
    width: 8px;
    height: 8px;
    border: 1px solid blue;
    float: left;
    position:absolute;
}
#menu, ul {
    list-style: none;
    margin: 0;
    cursor: default;
    width:194px;
    padding:6px;
}
#menu, ul, li {
    padding: 2px;
}
#menu li:hover{
    background: blue;
    color: #fff;
}
#result {
    border: 1px solid #000;
    width: 206px;
}
</style>
<script type="text/javascript">
 function showMenu(){
   document.getElementById("one").style.display="block";
 }
 function hideMenu(){
   document.getElementById("one").style.display="none";
 }
</script>
</head>
<body>
<div id="container">
    <div id="one" onclick="hideMenu()">
        <ul id="menu">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
    </div>
</div>
<div id="two"><img src="images/arrow_double.png" onclick="showMenu()"></div>
<br>
<textarea id="result"></textarea>
</body>
</html>

这是我的建议，尽管它没有在InternetExplorer:中测试

// pick a name that's useful to you:
function textToTextArea (e) {
    /* most browsers pass the event object to the function,
       IE does, or did, not; here we use the passed-event if it's
       available, or the window.event if it's not there (implying IE):
    */
    e = e || window.event;
    // finding out the text property we can access to retrieve an element's text:
    var text = 'textContent' in document ? 'textContent' : 'innerText';
    /* getting the textarea by its 'id',
       and setting its innerHTML to be equal to the text of the clicked 'li':
    */
    document.getElementById('result').innerHTML = e.target[text];
}
var list = document.getElementById('menu');
list.onclick = textToTextArea;

JS Fiddle演示。

顺便说一句，在jQuery中，上述内容可以缩写为：

$('li').click(function(){
    $('#result').val($(this).text());
});

JS Fiddle演示。

它并不总是最好的解决方案，但它节省了大量时间，并且很好地处理了跨浏览器问题（使我们免于对event对象进行规范化）；虽然不必（也不应该）必须证明不使用jQuery是合理的，但有时值得记住的是，我们都可以做其他更有用的事情，而不是简单地出于任意（在本例中未指明）原因而避免它。

演示jsFiddle

描述

这是一个纯JavaScript的答案，它在每个li项上都使用This。如果您愿意，可以在带有for循环的window.onload事件中完成此事件绑定。它适用于所有浏览器，布局在我看来是错误的，但这不是我不在乎的问题。

如果您需要更多帮助，请告诉我。

HTML

<div id="container">
    <div id="one" onclick="hideMenu()">
        <ul id="menu">
            <li onclick="itemPicked(this)">Item 1</li>
            <li onclick="itemPicked(this)">Item 2</li>
        </ul>
    </div>
</div>
<div id="two">
    <img src="http://realestatecommunities.com/wp-content/uploads/2011/01/blue-arrow-down.jpg" height="20px" width="20px" onclick="showMenu()" />
</div>
<br/>
<textarea id="result"></textarea>

JS

function showMenu() {
    document.getElementById("one").style.display = "block";
}
function hideMenu() {
    document.getElementById("one").style.display = "none";
}
function itemPicked(el) {
    document.getElementById("result").value = el.textContent;
}

CSS

#container {
    width: 200px;
    float: left;
    font-family: Arial;
    font-size: 10pt;
    position:relative;
}
#one {
    height: 200px;
    border: 1px solid red;
    display: none;
    position:absolute;
    background: #C0C0C0;
}
#two {
    width: 8px;
    height: 8px;
    border: 1px solid blue;
    float: left;
    position:absolute;
}
#menu, ul {
    list-style: none;
    margin: 0;
    cursor: default;
    width:194px;
    padding:6px;
}
#menu, ul, li {
    padding: 2px;
}
#menu li:hover {
    background: blue;
    color: #fff;
}
#result {
    border: 1px solid #000;
    width: 206px;
}
相关文章：