如何将div标签的ID，名称和值传递给JavaScript函数

Question

我试图基于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);
}

我哪里做错了？？

Answer 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 。 我假设这些是想要的。

Answer 2

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

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

Answer 3

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

}

Answer 4

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

如何将div标签的ID，名称和值传递给JavaScript函数

问题描述

4 个解决方案

解决方案1
2 已采纳 2014-08-25 11:31:06

解决方案2
0 2014-08-25 11:52:06

解决方案3
-1 2014-08-25 11:30:13

解决方案4
-1 2014-08-25 11:35:09

如何将div标签的ID，名称和值传递给JavaScript函数

问题描述

4 个解决方案

解决方案1 2 已采纳 2014-08-25 11:31:06

解决方案2 0 2014-08-25 11:52:06

解决方案3 -1 2014-08-25 11:30:13

解决方案4 -1 2014-08-25 11:35:09

解决方案1
2 已采纳 2014-08-25 11:31:06

解决方案2
0 2014-08-25 11:52:06

解决方案3
-1 2014-08-25 11:30:13

解决方案4
-1 2014-08-25 11:35:09