0

I'm trying to create an easy bib clone. This means that I'll have 20+ boxes that all require an author name. So I've broken author name into the var lname and fname. My get.element.by.id is going to just consist of the same variables as the initial function, plus or minus different variables.

In the JS, I have the variable lname, for instance. lname is tied to the first box. If I try to "reuse" lname for the second box, it gives me the results for the first box. I can write a function for every box I create, but it seems like there should be a way to "reuse" a variable from another function. Is there?

function bib() {
  var lname = document.getElementById("lname").value;
  var fname = document.getElementById("fname").value;
  var title = document.getElementById("title").value;
  var city = document.getElementById("city").value;
  var corp = document.getElementById("corp").value;
  var pub = document.getElementById("pub").value;
  document.getElementById("cite1").innerHTML = lname + ", " + fname + "." + title + "." + city + "." + corp + "." + pub + "."    ;
  document.getElementById("cite2").innerHTML = lname + ", " + fname + ", and" +lname2+","+fname2+"." + title + "." + city + "." + corp + "." + pub + "."    ;
}
.grid{
  display: grid;
  flex-wrap: wrap;
  grid: 500px / auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;
  padding: 10px 10px 10px 10px;
  font-size: 16px;
}

/*.float{
    float:left;
}*/

.output {
    height: 150px;
    width: 255px;
    flex-wrap: wrap;
  word-wrap: break-word;
}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
.grid {
    width: 100%;
  }
}
<h1> MLA Sourcing</h1>
<h2> Print Sourcing</h2>
<p> Enter the information in the appropriate box for your print source, click generate, copy to clipboard
  <br>and paste into your work boxes</p>
<!--single author-->
<!--single author-->

<div class="grid">
  <div>
        <h3> Bib a Book or Article -<br> Single Author </h3>
        <input class="float" placeholder="Author Last Name" id="lname"></input><br>
        <input class="float" placeholder="Author First Name" id="fname"></input><br>

        <input class="float" placeholder="Book/ Article Title" id="title"></input><br>
        <input class="float" placeholder="City of Publication" id="city"></input><br>
        <input class="float" placeholder="Press Company" id="comp"></input><br>
        <input class="float" placeholder="(last) Year of Publication" id="pub"></input><br>

      <p> <button onClick="bib()">Generate</button></p>


         <h3> Citation</h3>
        <p class="output" id="cite1"></p>
        <button>copy to clipboard</button>
  </div>
  <div>
      <h3> Bib a Book or Article -<br> Single Author </h3>
      <input class="float" placeholder="Author Last Name" id="lname"></input><br>
      <input class="float" placeholder="Author First Name" id="fname"></input><br>
      <input class="float" placeholder="2nd Author Last Name" id="lname2"></input><br>
      <input class="float" placeholder="2nd Author First Name" id="fname2"></input><br>
      <input class="float" placeholder="Book/ Article Title" id="title"></input><br>
      <input class="float" placeholder="City of Publication" id="city"></input><br>
      <input class="float" placeholder="Press Company" id="corp"></input><br>
      <input class="float" placeholder="(last) Year of Publication" id="pub"></input><br>

      <p> <button onClick="bib()">Generate</button></p>


       <h3> Citation</h3>
        <p class="output" id="cite2"></p>
        <button>copy to clipboard</button>
  </div>
  <div>
      <h3> Bib a Book or Article -<br> Single Author </h3>
      <input class="float" placeholder="Author Last Name" id="lname"></input><br>
      <input class="float" placeholder="Author First Name" id="fname"></input><br>
      <input class="float" placeholder="Book/ Article Title" id="title"></input><br>
      <input class="float" placeholder="City of Publication" id="city"></input><br>
      <input class="float" placeholder="Press Company" id="corp"></input><br>
      <input class="float" placeholder="(last) Year of Publication" id="pub"></input><br>

      <p> <button onClick="bib()">Generate</button></p>


       <h3> Citation</h3>
        <p class="output" id="cite1"></p>
        <button>copy to clipboard</button>
  </div>
  <div>
      <h3> Bib a Book or Article -<br> Single Author </h3>
      <input class="float" placeholder="Author Last Name" id="lname"></input><br>
      <input class="float" placeholder="Author First Name" id="fname"></input><br>
      <input class="float" placeholder="Book/ Article Title" id="title"></input><br>
      <input class="float" placeholder="City of Publication" id="city"></input><br>
      <input class="float" placeholder="Press Company" id="corp"></input><br>
      <input class="float" placeholder="(last) Year of Publication" id="pub"></input><br>

      <p class="float"> <button onClick="bib()">Generate</button></p>


       <h3> Citation</h3>
        <p class="output" id="cite1"></p>
        <button>copy to clipboard</button>
  </div>
</div>
Ryan Clason
  • 1
  • 1
  • 4
    The values of "id" attributes must be **unique** in each page. You cannot reuse "id" values. – Pointy Jun 22 '20 at 20:52
  • Does this answer your question? [Can multiple different HTML elements have the same ID if they're different elements?](https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme) – ggorlen Jun 22 '20 at 20:53
  • 3
    Also, sounds pedantic but an HTML element id is totally different than a JS variable. No relation at all. – ggorlen Jun 22 '20 at 20:54
  • In addition, you should really be wrapping each set of `input` fields in a parent container and then you wouldn't need any `id`s at all. IDs lend themselves to brittle code that doesn't scale as you are seeing. There are lots of other ways of referencing fields than an `id`. – Scott Marcus Jun 22 '20 at 20:57
  • I'm probably missing some fundamentals, I'm still learning/applying. If I use a container, would I use get.element.by.class with different container names? Then concatenate the container names? – Ryan Clason Jun 22 '20 at 21:06
  • See the answer below, @Ryan – trincot Jun 22 '20 at 21:07
  • So could I add: var fname2 = _parent.querySelector(".fname2").value; and lname2 to the original function and a new _parent.querySelector(".cite").innerHTML concatenation to reuse the variables multiple times? I'm going to have to add a var for Article, Volume, pages, etc. – Ryan Clason Jun 22 '20 at 21:24
  • @RyanClason, You can comment on my answer for details about my answer and additions. – imvain2 Jun 22 '20 at 21:30

1 Answers1

1

Since you can't reuse IDs, I would recommend giving the inputs a class. Then your BIB function, pass this and refer to the parent element to get the child inputs.

function bib(el) {
  var _parent = el.parentNode.parentNode;
  var lname = _parent.querySelector(".lname").value;
  var fname = _parent.querySelector(".fname").value;
  var title = _parent.querySelector(".title").value;
  var city = _parent.querySelector(".city").value;
  var corp = _parent.querySelector(".comp").value;
  var pub = _parent.querySelector(".pub").value;
  _parent.querySelector(".cite").innerHTML = lname + ", " + fname + "." + title + "." + city + "." + corp + "." + pub + ".";
}
.grid{
  display: grid;
  flex-wrap: wrap;
  grid: 500px / auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;
  padding: 10px 10px 10px 10px;
  font-size: 16px;
}

/*.float{
    float:left;
}*/

.output {
    height: 150px;
    width: 255px;
    flex-wrap: wrap;
  word-wrap: break-word;
}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
.grid {
    width: 100%;
  }
}
<h1> MLA Sourcing</h1>
<h2> Print Sourcing</h2>
<p> Enter the information in the appropriate box for your print source, click generate, copy to clipboard
  <br>and paste into your work boxes</p>
<!--single author-->
<!--single author-->

<div class="grid">
  <div>
        <h3> Bib a Book or Article -<br> Single Author </h3>
        <input class="float lname" placeholder="Author Last Name"></input><br>
        <input class="float fname" placeholder="Author First Name"></input><br>

        <input class="float title" placeholder="Book/ Article Title"></input><br>
        <input class="float city" placeholder="City of Publication"></input><br>
        <input class="float comp" placeholder="Press Company"></input><br>
        <input class="float pub" placeholder="(last) Year of Publication"></input><br>

      <p> <button onClick="bib(this)">Generate</button></p>


         <h3> Citation</h3>
        <p class="output cite"></p>
        <button>copy to clipboard</button>
  </div>
</div>
imvain2
  • 15,480
  • 1
  • 16
  • 21