Javascript 将两个输入字段合并为一个变量_Javascript_Html

Javascript 将两个输入字段合并为一个变量

javascript html

Javascript 将两个输入字段合并为一个变量,javascript,html,Javascript,Html,例如，在一个变量中包含两个ID var optionValue=document.getElementById('Input1' + " " + 'Input2'); 该代码不起作用，但是否有类似的代码可以做到这一点 JS HTML 期权价值选项显示文本我已经尝试了上面的代码，但它不会添加到列表框？它只是说框中未定义的元素是文本输入？那么下面的一些想法就行了： var value1 = document.getElementById('Input1').value; var valu

例如，在一个变量中包含两个ID

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

该代码不起作用，但是否有类似的代码可以做到这一点

HTML


期权价值
选项显示文本

我已经尝试了上面的代码，但它不会添加到列表框？

它只是说框中未定义的元素是文本输入？那么下面的一些想法就行了：

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

我对你的问题解释如下：

按id获取n个元素数

可以使用以下块执行此操作：

HTML

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

然后，您可以从每个匹配的节点派生出所需的任何数据。

关于我留下的注释，下面是一个完整的示例

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


函数byId（e）{returndocument.getElementById（e）；}
函数newEl（tag）{returndocument.createElement（tag）；}
函数newText（txt）{return document.createTextNode（txt）；}
函数toggleClass（元素，newStr）
{
index=element.className.indexOf（newStr）；
如果（索引==-1）
element.className+=''+newStr；
其他的
{
如果（索引！=0）
newStr=''+newStr；
element.className=element.className.replace（newStr“”）；
}
}
函数forEachNode（节点列表，func）
{
变量i，n=节点列表长度；
对于（i=0；i您是否试图获取对DOM元素的引用数组或id以某种方式组合了两个字符串的单个元素？optionValue
的预期内容是什么？“该代码不起作用，但是否有类似的代码可以这样做？”做什么？获取一个ID等于另两个元素ID串联的元素：）它表示未定义
，因为您试图获取字符串的值
。可能还有很多其他问题需要解决，但首先要将optionValue替换为optionValue
。value
与optionDisplaytext相同。您好，我用过它，但它没有出现在列表框中，是吗有什么原因吗？谢谢：）@user2341069-您还没有向其中添加任何文本！也就是说，您可以在这里添加document.createTextNode的结果（“这里有文本”）；添加到选项，然后再将其添加到列表中。@enhzflep很抱歉，我不太了解andokay，我将添加一个完整的解决方案。请给我5分钟。谢谢！这是我开始时需要的：）
<span id="foo">Foo</span>
<span id="bar">Bar</span>
<span id="foo1">Foo</span>
<span id="bar1">Bar</span>

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

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