Question

我试图在getElement中调用另一个函数，但是当我更改我的选择时它不能正常工作。当我选择Car时，在文本框中我的varxumb应该填充。任何想法......

document.getElementById("mycall1").insertRow(-1).innerHTML = '<td><select id = "forcx" onchange="fillgap()"><option>Select</option><option>Force</option><option>Angle</option><option>Area</option></select></td>';
function fillgap() {
    var xnumb = 20;
    var forcxlist = document.getElementById("forcx");
    if (forcxlist == "Force") {
        document.getElementById("result1").value = xnumb;
    }
}

Answer 1

我不知道这＆＃34; Force＆＃34;价值即将来临。你可以尝试这些解决方案。

if (forcxlist == "Force")

改为使用

var forcxlistText = forcxlist.options[forcxlist.selectedIndex].text;
if (forcxlistText == "Force")

或使用价值技术

<div id ="mycall1">
</div>
<div id ="result1">
</div>
<script>
    document.getElementById("mycall1").innerHTML = '<td><select id = "forcx" onchange="fillgap(this.value)"><option value="1">Select</option><option value="2">Force</option><option value="3">Angle</option><option value="4">Area</option></select></td>';

    function fillgap(value){
         var xnumb = 20;         
         if (value == "2"){
             document.getElementById("result1").innerHTML = xnumb;    
         }
    }
</script>

或使用

<div id ="mycall1">
</div>
<input type="text" id="result1" value=""/>
<script>
    document.getElementById("mycall1").innerHTML = '<td><select id = "forcx"><option value="1">Select</option><option value="2">Force</option><option value="3">Angle</option><option value="4">Area</option></select></td>';

    document.getElementById("forcx").onchange = function (){
        var xnumb = 20; 
        var forcxlist = document.getElementById("forcx");
        var forcxlistValue = forcxlist.options[forcxlist.selectedIndex].value;
        if (forcxlistValue == "2"){
            document.getElementById("result1").value = xnumb;    
        }
    }
</script>

Answer 2

forcxlist变量是一个元素对象，由document.getElementById方法返回。之后，您正在检查此元素对象是否等于“Force”，这是一个字符串（意味着永远不会执行if块的内容）。您是否要检查该对象的内容是否等于Force？

而不是

 if (forcxlist == "Force"){

使用

if (forcxlist.innerHTML == "Force"){

我希望这有帮助！

Answer 3

无法使用innerHTML，因此我将其更改为.value

<components name="0">
        <type>XXX, XXX</type>
        <services name="0" type="XXX, XXX" key="YYY"/>
        <injectProperties>true</injectProperties>
        <instanceScope>single-instance</instanceScope>
        <parameters>
            <param1name>param1value</param1name>
            <param2name>param2value</param2name>
        </parameters>
</components>

Answer 4

这里有几个问题。

首先，您希望forcxlist是字符串，而不是元素，因此您需要使用.value来获取下拉列表的选定值。其次，您应该与===而不是==进行比较，因为这样可以确保类型相等，并且是最佳做法。

我还建议您使用HTML元素构建select。它使事物更清洁，更易读，更易于维护。

由于id使用相同的select，您必须将fillgap处理程序中的选择器更改为var forcxlist = e.target.value;，这样事件就会触发仅基于您正在与之交互的select，无论您在表中有多少行。

更新后的代码如下，以及更新的工作小提琴here。根据你关于添加额外行的评论，小提琴也有效。

<input type="button" value="Add Row" onclick="addDropDown()">
<table id="mycall1"></table>

<script>
  function addDropDown() {
    var tbl = document.getElementById("mycall1");
    var newRow = tbl.insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.appendChild(createDropDown("forcx", fillgap));
  }

  function createDropDown(id, onchange) {
    var dd = document.createElement('select');
    dd.id = id;
    dd.onchange = onchange;
    createOption("Select", dd);
    createOption("Force", dd);
    createOption("Angle", dd);
    createOption("Area", dd);
    return dd;
  }

  function createOption(text, dropdown) {
    var opt = document.createElement("option");
    opt.text = text;
    dropdown.add(opt);
  }

  function fillgap() {
    var xnumb = 20;
    var forcxlist = e.target.value;

    if (forcxlist === "Force") {
        document.getElementById("result1").value = xnumb;
    }
  }
</script>

<input type="text" id="result1">

我可以在Javascript中调用GetElement中的另一个函数吗？

4 个答案: