CODEWITHSUNDEEP
javascripthtml
nyi
nyi

Reputation: 3229

Adding an option object to 2 select boxes in javascript

I am new to javascript; I am trying to add values from the text box to 2 select boxes dynamically.

After entering a value(node name), I want to add that name to 2 select boxes srcNodes and targetNodes, but it is only adding the option to the targetNodes. Am I doing anything wrong here?

#addNode {
  margin-left: 20px;
  width: 20%;
  height: 20px;
  font-weight: bold;
}

#deleteNode {
  margin-right: 20px;
  width: 20%;
  height: 20px;
  font-weight: bold;
}

#txtInput {
  width: 50%;
  height: 10px;
  float: left;
  padding: 10px;
}

#srcNodes {
  width: 40%;
  font-family: courier new;
  padding: 10px;
}

#targetNodes {
  width: 40%;
  font-family: courier new;
  padding: 10px;
}

   
<textarea id="addNodeInput" placeholder="Node Name"></textarea>
<button id="addNode" onclick="addNode();">Add</button>
<button id="deleteNode" onclick="deleteNode();">Delete</button>
<div id="nodeConsole"></div>

<select id="srcNodes" size="8"> </select>
<select id="targetNodes" size="8"> </select>

<script>
  var cmd = "";

  var inNode = document.getElementById("addNodeInput");
  var out = document.getElementById("nodeConsole");

  function display() {
    out.value = "Node Operations";
    out.innerHTML = cmd + out.innerHTML;
    cmd = "";
  }


  function addNode() {
  var n=inNode.value ;
    cmd = ">>>" + n+ "<br />";
    //display(cmd);
    inNode.value = "";
    inNode.focus();
    var s = document.getElementById("srcNodes");
    var t = document.getElementById("targetNodes");
    var option = document.createElement("option");
    option.text = n;
    s.add(option);
		t.add(option);
 
  }

</script>

Upvotes: 2

Views: 62

Answers (1)

Jordan Soltman
Jordan Soltman

Reputation: 3873

You have created one element and then are trying to insert it into two different places. You should make two elements and then insert them both.

#addNode {
  margin-left: 20px;
  width: 20%;
  height: 20px;
  font-weight: bold;
}

#deleteNode {
  margin-right: 20px;
  width: 20%;
  height: 20px;
  font-weight: bold;
}

#txtInput {
  width: 50%;
  height: 10px;
  float: left;
  padding: 10px;
}

#srcNodes {
  width: 40%;
  font-family: courier new;
  padding: 10px;
}

#targetNodes {
  width: 40%;
  font-family: courier new;
  padding: 10px;
}
<textarea id="addNodeInput" placeholder="Node Name"></textarea>
<button id="addNode" onclick="addNode();">Add</button>
<button id="deleteNode" onclick="deleteNode();">Delete</button>
<div id="nodeConsole"></div>

<select id="srcNodes" size="8"> </select>
<select id="targetNodes" size="8"> </select>

<script>
  var cmd = "";

  var inNode = document.getElementById("addNodeInput");
  var out = document.getElementById("nodeConsole");

  function display() {
    out.value = "Node Operations";
    out.innerHTML = cmd + out.innerHTML;
    cmd = "";
  }


  function addNode() {
    var n = inNode.value;
    cmd = ">>>" + n + "<br />";
    //display(cmd);
    inNode.value = "";
    inNode.focus();
    var s = document.getElementById("srcNodes");
    var t = document.getElementById("targetNodes");
    var option1 = document.createElement("option");
    var option2 = document.createElement("option");

    option1.text = n;
    option2.text = n;
    s.add(option1);
    t.add(option2);

  }
</script>

Upvotes: 2

Related Questions