0

Looking online I found an example of a javascript code that updates HTML based on one text field.

Dynamically displaying input values using Javascript

That page links to this example. https://jsbin.com/ugasi5/3/edit?html,js,output

In the spirit of making it work before making it better.

I tried to extend it to more than one filed by creating duplicate variables (with unique names) it doesn't output anything. Also and it is clearly a naive attempt to make more than one field.

So my question is what is a non-naive way to extend this code for more than one (N) inputs?

HTML

<body>
    <form>
        <input type='text' id='nameField'>
    </form>
    <hr> Your name is <span id='nameDisplay'>??</span>
</body>

Javascript 

window.onload = function() {

  var nameField = document.getElementById('nameField');
  var lastNameValue = undefined;

  updateNameDisplay();

  setInterval(updateNameDisplay, 100);

  function updateNameDisplay() {
    var thisValue = nameField.value || "??";
    if (lastNameValue != thisValue) {
      document.getElementById('nameDisplay').innerHTML = lastNameValue = thisValue;
    }
  }

};

Edit in response to @heretic-monkey for the context of and objectionable measurable definition writing a non-native procedure. A Navie method of creating N inputs would have lots of code duplication, where a non-naive method would likely use loop patterns and have less code duplication. than a non-naive method. For example.

In pseudo a naive procedure: 

create input 1
create input 2
create input 3
...
create input N

create output 1
create output 2
create output 3
...
create output N

In pseudo a non-naive procedure: 

   someLoopPattern
       create N inputs

   someLoopPattern
       create N outputs
RandomNumberFun
  • 638
  • 2
  • 8
  • 25
  • 1
    What would make it "non-naive" or "elegant" that one could objectively measure? Otherwise this asks for opinions or a list of alternatives, neither of which fit very well in the Stack Overflow Q&A format. It's also not clear, from this question alone, what you want to do. If there is content from the other question or the code that is needed to understand this question, please provide that content (with appropriate attribute) in this question. – Heretic Monkey Nov 16 '19 at 21:30
  • @HereticMonkey A Navie method of creating N inputs would have lots of code duplication, where a non-naive method would likely use loops patterns and have less code duplication. than a non-naive method. – RandomNumberFun Nov 16 '19 at 21:35
  • What you want is recursion. – Richard Barker Nov 16 '19 at 21:48
  • @HereticMonkey In terms of what I want to do The example code does exactly what I want to do. There is not a clearer way to show it. It's a functional example. – RandomNumberFun Nov 16 '19 at 21:48
  • @RichardBarker It does not necessarily have to be recursive or does it? I was assuming recursion would be the most likely solution as recursive patterns are well suited for these type of procedures. Any help with the implementation would be great! Because that is where I am lost and just learning how to javascript! – RandomNumberFun Nov 16 '19 at 21:53
  • An combination of data attrs and numerical IDs are perhaps your best bet – Dev Man Nov 16 '19 at 21:54
  • The example code does not show the dynamic creation of input elements. The pseudo code does. Dynamic creation of input elements has been asked about before: [Adding input elements dynamically to form](https://stackoverflow.com/q/14853779/215552), for instance. I am unsure if that qualifies as non-naive, however. – Heretic Monkey Nov 16 '19 at 21:57
  • @ImmortalDude I created this question for help with it. If I knew how to whip it up I would not have created the question. While I appreciate your input I am glad to give you an accepted solution if you are willing to write it up.. Thanks for any help! – RandomNumberFun Nov 16 '19 at 21:58
  • @HereticMonkey yes your right. It dynamically updates the HTML as my original question states.. https://jsbin.com/ugasi5/3/edit?html,js,output – RandomNumberFun Nov 16 '19 at 21:58
  • @HereticMonkey the reason the pseudo-code shows input creation is to demonstrate an objectional measure that what a non-native procedure looks like. That was by your request. Of course, new inputs would have to be created to do what I am asking. I don't understand how that is not the case. How else can you create N inputs and N ouputs? – RandomNumberFun Nov 16 '19 at 22:16

0 Answers0