Question

我正在尝试为我的公司创建一个签名块生成器，我需要能够输出两次个人名称。一旦在传出的电子邮件中，另一个在回复中。我尝试过使用GetElementByID，这对于一个，但不是两个都可以。我尝试过GetElementsByName，但失败了。 https://codepen.io/jggrs/pen/paZyrN

$files=[
    'Non-Images Only'=>'filename 1 (https://example.com/test.exe)',
    'Mixed-Type'=>'filename 1 (https://example.com/test.pdf),
filename 2 (https://example.com/cool_image.jpg),
filename 3 (https://example.com/other-file.docx),
filename 4 (https://example.com/nice_image.png)',
    'Images-Only'=>'filename 1 (https://example.com/another.png),
filename 2 (https://example.com/cool_image.jpg))'];
foreach ($files as $type => $batch) {
    echo "Batch: ".$batch.PHP_EOL;
    echo "Expecting: ".$type.PHP_EOL;
    $images = preg_match('/\.(png|gif|jpe?g|bmp)/im', $batch);
    $nonImages = preg_match('/^(?!.*[.](png|gif|jpe?g|bmp))(?:.*$|,)/im', $batch);
    $result = "";
    if ($images && $nonImages) {
        $result = "Mixed-Type";
    }
    else {
        if ($images) {
            $result = "Images-Only";
        }
        else {
            $result = "Non-Images Only";
        }
    }
    echo "Result: ".$result.PHP_EOL;
    echo PHP_EOL;
}

Answer 1

总是使用类来做那样的事情

1-按类名获取所有元素

2-将其转换为数组，以便您可以循环（[] .slice.call（）将HTMLCollection转换为数组）

3-更改每个的innerHTML

<script type="text/JavaScript">
    function getOption(){
        var firstlast = document.getElementById("firstlast").value;
        var list = [].slice.call(document.getElementsByClassName('display_firstlast'));

      list.forEach(function(item){

      item.innerHTML= firstlast
      });
    }

</script>
</head>
<body>


<form>
First and Last Name: <input type="text" id = "firstlast">&nbsp;
<input type="button" onclick="getOption()" value="Make My Signature">
</form>


<!--NAME AND TITLE-->
<p>My name is <span class="display_firstlast"></span></p>

<p>My name is <span class="display_firstlast"></span></p>

</body>
</html>

Answer 2

这里的内容是javascript中的id必须对一个且只有一个元素是唯一的，但是，这可以通过将一个类分配给两个p标签或简单地完成：

 <script type="text/JavaScript">
        function getOption(){
            var firstlast = document.getElementById("firstlast").value;
  document.geElementById('display_firstlast').innerHTML= firstlast;
document.geElementById('display_firstlast2').innerHTML = firstlast;

        }

</script>
<p>My name is <span id = "display_firstlast"></span></p>

<p>My name is <span id = "display_firstlast2"></span></p>

Answer 3

document.querySelectorAll('button')[0].addEventListener('click', function() {
  var name = document.querySelectorAll('input')[0].value;
  var items = Array.prototype.slice.call(document.querySelectorAll('#display_firstlast'));
  
  for ( var e of items ) {
    e.innerHTML = name;  
  }
});

<p>My name is <span id = "display_firstlast"></span></p>

<p>My name is <span id = "display_firstlast"></span></p>

<div><input type="text" value="A Name" /> <button>Set Name</button></div>

正如许多人所说，你应该为此使用课程;但是，如果你真的需要它作为id =＆gt;

，你也可以这样做

document.querySelectorAll('#display_firstlast')

应该得到两个元素。

Answer 4

让我们教你一些更好的编码实践：

//<![CDATA[
/* external.js */
var doc, bod, M, I, Q, S, old = onload; // for use on other pages - read note below
onload = function(){
if(old)old(); // change old var name if using technique on other pages
doc = document; bod = doc.body;
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
Q = function(selector){
  return doc.querySelectorAll(selector);
}
S = function(selector){
  return doc.querySelector(selector);
}
var firstLast = I('first_last'), opt = I('opt'), out = I('output'), o1 = out.firstChild, o2 = o1.nextSibling;
I('form').onsubmit = function(){
  return false;
}
opt.onclick = function(){
  if(firstLast.value){
    o1.innerHTML = o2.innerHTML = 'My name is '+firstLast.value;
   }
}
firstLast.onfocus = function(){
  o1.innerHTML = o2.innerHTML = '';
}
} // end onload
//]]>

/* external.css */
html,body{
  padding:0; margin:0;
}
body{
  background:#000; overflow-y:scroll;
}
.main{
  width:940px; background:#aaa; padding:20px; margin:0 auto;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <form id='form' name='form'>
      <input id='first_last' name='first_last' type='text' />
      <input id='opt' name='opt' type='button' value='Make My Signature' />
    </form>
    <div id='output'><div></div><div></div></div>
  </div>
</body>
</html>

分离您的HTML，CSS和JavaScript，以便缓存它。

如何使用GetElementByID输出相同的输入两次？

4 个答案: