javascript - Combining two input fields into one variable - Stack Overflow

admin管理员组

文章数量:1406942

Include two IDs into one variable, for example

var optionValue=document.getElementById('Input1' + " " + 'Input2');

That code does not work but is there any similar code that would do this?

JS

function addNewListItem(){
var htmlSelect=document.getElementById('list');
var value1 = document.getElementById('Input1').value;
var value2 = document.getElementById('Input2').value;
var optionValue = value1 + " " + value2;
var optionDisplaytext = value1 + " " + value2;

var selectBoxOption = document.createElement("option");
selectBoxOption.value = optionValue.value;
selectBoxOption.text = optionDisplaytext.value;
htmlSelect.add(selectBoxOption, null);
alert("Option has been added successfully");
return true;

}

HTML

<table border="0" align="left">
<tr>
<td rowspan="2">
    <select name="list" id="list" size="10" style="width:150px">
    </select>
    </td>
<tr>
<td align="right">Option Value</td>
<td align="left"><input name="Input1" type="text" id="Input1" /></td>
</tr>
<tr>
<td align="right">Option Display Text</td>
<td align="left"><input name="Input2" type="text" id="Input2" /></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td align="left"><input name="btnAddItem" type="button" id="btnAddItem" value="Add Option" onclick="javaScript:addNewListItem();" /></td>
</tr>
</table>

I've tried the above code but it will not add to a listbox? it just says undefined in the box

Include two IDs into one variable, for example

var optionValue=document.getElementById('Input1' + " " + 'Input2');

That code does not work but is there any similar code that would do this?

JS

function addNewListItem(){
var htmlSelect=document.getElementById('list');
var value1 = document.getElementById('Input1').value;
var value2 = document.getElementById('Input2').value;
var optionValue = value1 + " " + value2;
var optionDisplaytext = value1 + " " + value2;

var selectBoxOption = document.createElement("option");
selectBoxOption.value = optionValue.value;
selectBoxOption.text = optionDisplaytext.value;
htmlSelect.add(selectBoxOption, null);
alert("Option has been added successfully");
return true;

}

HTML

<table border="0" align="left">
<tr>
<td rowspan="2">
    <select name="list" id="list" size="10" style="width:150px">
    </select>
    </td>
<tr>
<td align="right">Option Value</td>
<td align="left"><input name="Input1" type="text" id="Input1" /></td>
</tr>
<tr>
<td align="right">Option Display Text</td>
<td align="left"><input name="Input2" type="text" id="Input2" /></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td align="left"><input name="btnAddItem" type="button" id="btnAddItem" value="Add Option" onclick="javaScript:addNewListItem();" /></td>
</tr>
</table>

I've tried the above code but it will not add to a listbox? it just says undefined in the box

• javascript
• html

Share Improve this question Follow edited Jul 11, 2017 at 14:47 Cœur 38.8k2525 gold badges206206 silver badges278278 bronze badges asked Jul 22, 2013 at 14:03 user2341069user2341069 38955 gold badges88 silver badges1414 bronze badges 4

• Are you trying to get an array of references to DOM elements or the single element whose id somehow bines two strings? – Scott Sauyet Commented Jul 22, 2013 at 14:04
• 1 what is the expected content of optionValue? – Alp Commented Jul 22, 2013 at 14:05
• "That code does not work but is there any similar code that would do this?" Do what? getting an element which has an ID which equals another two elements' ID concatenation? :) – speti43 Commented Jul 22, 2013 at 14:14
• It says undefined, because you're trying to take the value of a string. There are plenty of other things that might be fixed, but first replace optionValue.value with just optionValue, and the same for optionDisplaytext. – Scott Sauyet Commented Jul 22, 2013 at 15:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Elements are text inputs ? Then somethink like below will work :

var value1 = document.getElementById('Input1').value;
var value2 = document.getElementById('Input2').value;
var optionValue = value1 + " " + value2;

Further to a ment I left, here's a full example.

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
    index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
    else
    {
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
    }
}
function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
    {
        func(nodeList[i], i, nodeList);
    }
}

window.addEventListener('load', mInit, false);

function mInit()
{
    byId('mBtn').addEventListener('click', onBtnClick, false);
}

function onBtnClick()
{
    var value1 = document.getElementById('Input1').value;
    var value2 = document.getElementById('Input2').value;
    var optionValue = value1 + " " + value2;

    var newOpt = newEl('option');
    newOpt.value = optionValue;         // this line sets the value given to a form by this option

    newOpt.appendChild( newTxt(optionValue) );  // this line adds the text viewable on the page

    byId('mSelect').appendChild(newOpt);
}

</script>
<style>
</style>
</head>
<body>
    <label>Input 1: <input id='Input1' value='value1'/></label>
    <label>Input 2: <input id='Input2' value='value2'/></label>
    <br>
    <select id='mSelect'></select><button id='mBtn'>Add to list</button>
</body>
</html>

I interpreted your question as follows:

1. Get n-number of elements by id.

You can do this with the following block:

HTML

<span id="foo">Foo</span>
<span id="bar">Bar</span>
<span id="foo1">Foo</span>
<span id="bar1">Bar</span>

JS

var nodes = document.querySelectorAll('#foo, #bar');
console.log(nodes);

You can then derive any data you want from each matched node.

本文标签： javascriptCombining two input fields into one variableStack Overflow