如何将 div 标签的 id、名称和值传递给 javascript 函数答案

【问题标题】：How to pass id, name & value of a div tag to a javascript function如何将 div 标签的 id、名称和值传递给 javascript 函数
【发布时间】：2014-08-25 20:37:27
【问题描述】：

我正在尝试根据 HTML 中下拉菜单的 onchange 属性将存储在 div 标记中的值传递给 javascript 函数。

但是什么都没有通过。显示未定义的错误。

这是我的代码：

假设 $temp_c 的值为 30。

<span id="temperature_div"><?php echo $temp_c; ?></span>

<label for="ddl_temptype"></label>
<select id="ddl_temptype" name="ddl_temptype" onchange="choose_temperature(this.value,temperature_div.value,temperature_div.name); ">
    <option value="celcius" selected>°C</option>
    <option value="farenheit">°F</option>
</select>

还有 JavaScript

function choose_temperature(conv, value, name) {
    alert(conv);
    alert(value);
    alert(name);
}

我哪里做错了？？

【问题讨论】：

“名称”指的是什么？
你在使用 jQuery 吗？
什么样的“未定义”错误？
我看到标签javascript 所以选择getElementById 的div 然后获取你想要传递的值。
我更喜欢使用data-attributes 而不是这种方法！

标签： javascript php ajax html

【解决方案1】：

在 JavaScript 中，您不能只使用 temperature_div 作为变量并假设它是 ID 为 temperature_div 的对象。有一些函数可以从 DOM 中获取元素。在纯 JavaScript 中：document.getElementById('temperature_div') 将返回元素。如果你使用的是 JQuery，那么$('#temperature_div') 会做类似的事情。

编辑：

试试这个功能：

function choose_temperature(conv) {
    alert(conv);
    var element = document.getElementById('temperature_div');
    alert(element.innerHTML);
    alert(element.attributes["name"].value);
}

调用者：choose_temperature(this.value);

编辑：更改为使用innerHTML 和attributes["name"].value 而不是value 和name。我假设这些是我们想要的。

【讨论】：

【解决方案2】：

首先，您使用了参数“值”，我认为这是一个关键词，最好不要使用。我假设您指的是您尚未定义的“temperature_div”中的“name”html 属性。为了便于理解，我放了一个名称属性。

<html>

<script type="text/javascript">


    function choose_temperature(conv, t_value, name) 
            {
                alert(conv);
                var div = document.getElementById("temperature_div");
                alert(div.innerHTML);
                alert(div.getAttribute("name"));
            }
    </script>

<label for="ddl_temptype"></label>
<select id="ddl_temptype" name="ddl_temptype" onchange="choose_temperature(this.value); ">
    <option value="celcius" selected>°C</option>
    <option value="farenheit">°F</option>
</select>

【讨论】：

【解决方案3】：

改用jquery，更方便。

在 div 中获取值：$('#temperature_div').html() 或 $('#temperature_div').text()

您可以将选择框的 onchange 写为：

$(document).on('change', '#ddl_temptype', function() {

  // Write your function here
  var div_value = $('#temperature_div').html();
  var select_val = $(this).val();


 alert(div_value);

});

或者像这样

$('#some_id').on('change', function() {

   // Write your function here
      var div_value = $('#temperature_div').html();
      var select_val = $(this).val();


     alert(div_value);
});

【讨论】：

JQuery 对于像这样更复杂的事情当然更容易使用，并且通常学习这样做是一件好事。然而，我想说像这样简单的东西并不能从它的使用中特别受益。

【解决方案4】：

在 javascript 中使用getElementById()

<span id="temperature_div"><?php echo $temp_c; ?></span>

    <label for="ddl_temptype"></label>
    <select id="ddl_temptype" name="ddl_temptype" onchange="choose_temperature(); ">
  <option value="celcius" selected> °C</option>
 <option value="farenheit"> °F</option>
  </select>


function choose_temperature()
{
    var value=document.getElementById('temperature_div').innerHTML; //to get html inside span
     var conv=document.getElementById('ddl_temptype').value;

    alert(conv);
    alert(value);

}

【讨论】：

没有。这不是传入，你的函数很脆弱，不能回答问题中的要求。
@SecondRikudo 为什么？他只想获取 div 的值？对吗？
哪个div？ ide是将值传递给函数。更不用说spans 没有.value 属性。