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

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 打印了 patent_test_info[key].right_eye 的内容，然后将其作为参数传递，并且变量的内容很好。但检查 html 元素显示 patent_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 个问题:

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 并将您的“ key ”添加到其中(假设它是有效的)。

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