Skip to content Skip to sidebar Skip to footer
Home / Javascript

Dropdown Display Just Js

Post a Comment
I have a few dropdown lists that are by javascript and it is working fine. The question is how do I display out the title of the first dropdown. I have commented on the place that

Solution 1:

Create a function which receives an array and a string and return title of spesific item. like this

function getTitle(arr, val) {
  var item = arr.find(function(itm) {
    return itm['value'] == val;
  });
  return item['title'];
}

Use this function for array you want. for example title of first array

var textdisplay = getTitle(arr1, fId);

And add that where you want as output

document.getElementById("Result").innerHTML +=
  "Answer " +
  ++answer +
  ") " +
  area +
  " ----" +
  func(area) +
  "<br>" +
  amount / discount +
  "<br>" +
  soilamount +
  "<br>" +
  textdisplay;

Use this code.

var rowNumber = 0;
var arr1 = [{
    title: "10mm",
    value: "return 2;"
  },
  {
    title: "20mm",
    value: "return 2;"
  },
  {
    title: "30mm",
    value: "return 3;"
  },
  {
    title: "40mm",
    value: "return 4;"
  },

  {
    title: "title 1",
    value: "return Math.min( Math.max(2 / 100 * supposearea + 11.7222222222222, 9.5), 11.5 );"
  },
  {
    title: "title 2",
    value: "return Math.min(Math.max(2 / 100 * supposearea + 10.2222222222222, 8), 10);"
  },
  {
    title: "title 3",
    value: "return Math.min( Math.max(2 / 200 * supposearea + 11.7222222222222, 9.5), 11.5 );"
  },
  {
    title: "title 4",
    value: "return Math.min(Math.max((2/200*supposearea + 13.7222222222222),11.5),13.5);"
  }
];
var arr2 = [{
    title: "Original",
    value: "0.65"
  },
  {
    title: "35% Discount",
    value: "1"
  }
];
var arr3 = [{
    title: "No Soil",
    value: "return 0;"
  },
  {
    title: "Soil",
    value: "return Math.min(Math.max((2*(areas) + 3), 2),4);"
  }
];

function createSelect(tag, id, array) {
  var select = document.createElement("select");
  select.id = id + "-" + rowNumber;

  tag.appendChild(select);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i].value;
    option.text = array[i].title;
    select.appendChild(option);
  }
}

function getTitle(arr, val) {
  var item = arr.find(function(itm) {
    return itm['value'] == val;
  });
  return item['title'];
}

function add_field() {
  var p = document.createElement("p");
  p.setAttribute("id", "input_text" + rowNumber + "_wrapper");
  var input1 = document.createElement("input");
  input1.setAttribute("type", "text");
  input1.setAttribute("class", "input_text");
  input1.setAttribute("id", "inp1-" + rowNumber);
  p.appendChild(input1);

  var input2 = document.createElement("input");
  input2.setAttribute("type", "text");
  input2.setAttribute("class", "input_text");
  input2.setAttribute("id", "inp2-" + rowNumber);
  p.appendChild(input2);

  createSelect(p, 'sel1', arr1);
  createSelect(p, 'sel2', arr2);
  createSelect(p, 'sel3', arr3);

  var btn = document.createElement("input");
  btn.setAttribute("type", "button");
  btn.setAttribute("value", "Remove");
  btn.setAttribute(
    "onclick",
    'remove_field("input_text' + rowNumber + '_wrapper")'
  );
  p.appendChild(btn);

  document.getElementById("field_div").appendChild(p);
  rowNumber++;
}

function remove_field(id) {
  document.getElementById(id).innerHTML = "";
  calculate();
}

function calculate() {
  var answer = 0;
  document.getElementById("Result").innerHTML = "";
  var ps = document.getElementById("field_div").getElementsByTagName("p");
  for (var i = 0; i < ps.length; i++) {
    if (ps[i].childNodes.length == 0) continue;
    var length = ps[i].childNodes[0].value;
    var width = ps[i].childNodes[1].value;
    var area = length * width;

    var fId = ps[i].childNodes[2].value;
    var func = new Function("supposearea", fId);

    var discount = ps[i].childNodes[3].value;

    var funcId = ps[i].childNodes[4].value;
    var soil = new Function("areas", funcId);

    var amount = area * func(area);
    var soilamount = area * soil(area);

    // ---- CANNOT WORK
    var textdisplay = getTitle(arr1, fId);
    // -- PLS CHECK CHECK HERE----------------------------------------------->
    var statement;
    if (soilamount < 1) {
      statement = "Total Impe ";
    } else {
      statement = "Got Soil";
    }

    document.getElementById("Result").innerHTML +=
      "Answer " +
      ++answer +
      ") " +
      area +
      " ----" +
      func(area) +
      "<br>" +
      amount / discount +
      "<br>" +
      soilamount +
      "<br>" +
      textdisplay;
    document.getElementById("Result1").innerHTML += statement;
  }
}
<div id="wrapper">
  <div id="field_div">
    <input type="button" value="Grass" onclick="add_field();">
  </div>
</div>
<p><button type="button" onclick="calculate()">Calculate</button></p>
<p id="Result"></p>
<p id="Result1"></p>

Tip Use specific ids for your drop downs. I pass a third input for your createSelect function.


Solution 2:

I did the following modifications/enhancements in your code:
(I know that doesn't answer the question for the moment, but I am waiting for your clarifications.)

  1. Changed id to className, as you shouldn't have multiple identical ids,
  2. Moved the arrays outside of their functions,
  3. Removed the "duplicate" functions and added a second parameter to the remaining one.

See snippet with my comments for more details:

var rowNumber = 0;

// TAKIT: Moved arrays outside of the functions,
// as the functions were similar we'll be only using one!
// (We could rename those arrays to have a meaningfull variable name)
var array1 = [{
    title: "10",
    value: "return 10;"
  },
  {
    title: "20",
    value: "return 20;"
  },
  {
    title: "30",
    value: "return 30;"
  },
  {
    title: "40",
    value: "return 40;"
  },
  {
    title: "50",
    value: "50;"
  },
  {
    title: "60",
    value: "60;"
  },
  {
    title: "70",
    value: "70;"
  },
  {
    title: "80",
    value: "return Math.min(Math.max((3/-500*supposearea + 103.7),50.5),60);"
  }
];

var array2 = [{
    title: "Original",
    value: "0.65"
  },
  {
    title: "35% Discount",
    value: "1"
  }
];

var array3 = [{
    title: "No Soil",
    value: "return 0;"
  },
  {
    title: "Soil",
    value: "165.3;"
  }
];


// TAKIT: Added 2nd parameter in this function
function createSelect(tag, array) {
  var select = document.createElement("select");
  select.className = "select-" + rowNumber; // TAKIT: Changed .id to .className
  tag.appendChild(select);
  // Append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i].value;
    option.text = array[i].title;
    select.appendChild(option);
  }
}

// TAKIT: Removed the other createSelect1 and 2 functions, they were similar

function add_field() {
  var p = document.createElement("p");
  p.setAttribute("id", "input_text" + rowNumber + "_wrapper");
  var input1 = document.createElement("input");
  input1.setAttribute("type", "text");
  input1.setAttribute("class", "input_text");
  input1.setAttribute("id", "inp1-" + rowNumber);
  p.appendChild(input1);

  var input2 = document.createElement("input");
  input2.setAttribute("type", "text");
  input2.setAttribute("class", "input_text");
  input2.setAttribute("id", "inp2-" + rowNumber);
  p.appendChild(input2);

  // TAKIT: Using the same function for the 3 lines below, with the new 2nd parameter
  createSelect(p, array1);
  createSelect(p, array2);
  createSelect(p, array3);

  var btn = document.createElement("input");
  btn.setAttribute("type", "button");
  btn.setAttribute("value", "Remove");
  btn.setAttribute("onclick", 'remove_field("input_text' + rowNumber + '_wrapper")');
  p.appendChild(btn);

  document.getElementById("field_div").appendChild(p);
  rowNumber++;
}

function remove_field(id) {
  document.getElementById(id).innerHTML = "";
  calculate();
}

function calculate() {
  var answer = 0;
  document.getElementById("Result").innerHTML = "";
  var ps = document.getElementById('field_div').getElementsByTagName('p');
  for (var i = 0; i < ps.length; i++) {
    if (ps[i].childNodes.length == 0) continue;
    var length = ps[i].childNodes[0].value;
    var width = ps[i].childNodes[1].value;
    var area = length * width;

    var fId = ps[i].childNodes[2].value;
    var func = new Function("supposearea", fId);

    var discount = ps[i].childNodes[3].value;

    var funcId = ps[i].childNodes[4].value;
    var soil = new Function("areas", funcId);

    var amount = area * (func(area));
    var soilamount = area * (soil(area));

    // -- CANNOT WORK -----------------------------------
    var h = document.getElementById("createSelect"); // TAKIT: null, because id "createSelect" doesn't exist. What are you trying to do?
    var textdisplay = h.options[h.selectedIndex].text;

    // -- PLS CHECK CHECK HERE --------------------------
    var statement;
    if (soilamount < 1) {
      statement = "Total Impe ";
    } else {
      statement = "Got Soil";
    }


    document.getElementById("Result").innerHTML +=
      "Answer " + ++answer + ") " + area + " ----" + func(area) + '<br>' + amount / discount + '<br>' + soilamount + "<br>";
    document.getElementById("Result1").innerHTML += statement;

  }
}
<div id="wrapper">
  <div id="field_div">
    <input type="button" value="Grass" onclick="add_field();">
  </div>
</div>
<p><button type="button" onclick="calculate()">Calculate</button></p>
<p id="Result"></p>
<p id="Result1"></p>

Feel free to comment for any modification.

Hope it helps, anyway!


You may like these posts

Post a Comment for "Dropdown Display Just Js"