我可以在Javascript的GetElement内部调用另一个函数吗

Question

I am trying to call another function inside the getElement but it is not working everything when i change my selection. When i select Car, in the textbox my varxumb should populate. Any idea...

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

I don't know how this "Force" value is coming to check. you can try these solutions.

if (forcxlist == "Force")

instead use

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

or use value technique

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

or use

<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

The forcxlist variable is an element object, returned by the document.getElementById method. Afterwards, you are checking if this element object is equal to "Force", which is a string (meaning the contents of your if block will never be executed). Did you mean to check if the contents of that object are equal to Force?

Instead of

 if (forcxlist == "Force"){

use

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

I hope this helps!

Answer 3

无法使用innerHTML，所以我将其更改为.value

document.getElementById("result1").value = xnumb;    

Answer 4

There are a couple issues here.

First, you are expecting forcxlist to be a string, not an element, so you need to use .value to get the selected value of the dropdown. Second, you should do your comparison with === not == , as this ensures type equality as well, and is best practice.

I would also recommend building your select using HTML elements. It keeps things cleaner, is more readable, and is easier to maintain.

Since you are using the same id for the select , you would have to change the selector in your fillgap handler to var forcxlist = e.target.value; , this way the event will fire based on only the select that you are interacting with, regardless of how many rows you have in the table.

Updated code is below, and an updated working fiddle here . As per your comment about adding additional rows, the fiddle has this working as well.

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