Question

我正在使用javascript创建一个html元素：

html_info +=    '<div class="row"><h4>'+ i +'. Patient: '+ key +'</h4>Date of birth: '+info[0]+'<br> Occupation: '+info[1]+'<br> Date of Test: ' + info[2]+ '<script type="text/javascript"> draw_chart(' + patient_test_info[key].right_eye +' ); </script></div>';

document.getElementById('patient_display').innerHTML += html_info;

它正确创建元素并显示存储在info数组中的信息，但是对draw_chart（）函数的调用失败。我在使用console.log之前打印了patient_test_info[key].right_eye的内容，然后将其作为参数传递，并且变量的内容很好。但是检查html元素会显示patient_test_info[key].right_eye未正确传递，只是空对象。

<script type="text/javascript"> draw_chart([object Object],[object Object],[object Object],[object Object] ); </script>

我的draw_chart（）函数必须在与用于显示info内容的div相同的div中绘制图表。在独立调用它时，它无法识别新创建的div，因此不显示任何内容。

function draw_chart(data)  {

    var chart = d3.cloudshapes.barChart()
        .width(800).height(800);

    for(var i=0; i<data.length; i++)  {
        var temp_value = data[i];
        d3.select("#row")
            .datum(temp_value)
            .call(chart);
    }
}

使用参数调用函数的正确方法是什么？

Answer 1

adeneo所说的是，如果你直接调用它，它应该可以工作，如下：

html_info += '<div class="row"><h4>'+ i +'. Patient: '+ key +'</h4>Date of birth: '+info[0]+'<br> Occupation: '+info[1]+'<br> Date of Test: ' + info[2] + draw_chart(patient_test_info[key].right_eye) + '</div>';

在回复您的评论时，我不知道您使用的图表代码是如何工作的，但如果d3.select("#row")应该定位您创建的div，那么您有3个问题：< / p>

1）在将div实际添加到DOM之前调用该函数。您需要先执行html_info += '<div class="row">...'和....innerHTML += html_info;，然后然后调用draw_chart（）。

2）您使用<div class="row">定位select("#row") - 假设标准语法，＃表示ID，而不是类。您需要将其设为id="row"或select(".row")（点表示一个类）。但是，如果您计划多次调用此函数来添加多个图表，则需要它们具有唯一的名称，否则您将无法指定要使用最新的行。我建议使用ID并添加你的“密钥”，假设它是有效的。

3）同样，我不确定图表代码是如何工作的，但我猜它会替换目标div的内容，而不是附加到它，这意味着你将失去你的标题行。如果是这种情况，我建议在你的行div中添加另一个div，然后给它命名，以便你可以定位它，例如'<div><h4>'+ i +'. Patient: '+ key +'</h4>Date of birth: '+info[0]+'<br> Occupation: '+info[1]+'<br> Date of Test: ' + info[2] + '<div id="chart-' + key + '"></div></div>'。将内容添加到innerHTML后，您可以调用draw_chart(patient_test_info[key].right_eye, key)并修改draw_chart方法以使用名称的键，例如d3.select("#chart-" + key)。

使用html中的参数调用javascript函数

1 个答案: