java script textarea i text field

Question

Czy wie ktos jak rozwiązać następujący problem w js?

Każda linia textarea musi mieć odpowiedni input, każdy input ma swoją linię w textarea.

kod html:
 

<table>
        <td>
            <input id="1" type="text" /><br />
            <input id="2" type="text" /><br />
            <input id="3" type="text" /><br />
            <input id="4" type="text" /><br />
            <input id="5" type="text" /><br />
        </td>
        <td>
            <textarea id="textareaT" cols="30" rows="8"></textarea>
        </td>
</table>

podsunieto mi taka odpowiedz(absolutnie nie jest zla bo jest bardzo dobra)
 

const textarea = document.getElementById('textarea1');

const inputsId = [1,2,3,4,5];

inputsId.forEach(id => {

  const currentElement = document.getElementById(`${id}`);

  currentElement.addEventListener('input', () => {

    textarea.value = '';

 

    inputsId.forEach(id => {

      const input = document.getElementById(`${id}`);

      textarea.value += `\n${input.value}`;

    });

  }, false);

});

problem polega na tym ze dziala to w jedna strone tzn jak wpisze cos w textfieldzie to pojawi sie w arei a potrzebuje zeby dzialalo w obie tzn jak wpisze w textfieldzie pojawia sie w arei a jak wpisze w arei pojawia sie w textfieldzie

Comments

Zla kategoria.

Kod wstawiaj w przeznaczonych do tego bloczkach: {...} code

Answer 1

Jak chcesz żeby inputy były pod sobą to używaj css'a nie br'a. Do tego używamy css'a.

http://jsbin.com/dihukuj/edit?js,console,output tutaj całość możesz odrazu sprawdzić. Poprostu pomniejsz zakładkę output to inputy same wskoczą pod siebie.

 if(!textAreaValue){
     textAreaValue = "\n".repeat(inputs.length);
     textAreaValue = textAreaValue.split("");
     textAreaValue[id - 1] = this.value + "\n";
     textArea.value = textAreaValue.join("");
     return;
   }

to magiczne id - 1 to po to aby przypisywało odpowiednią linijke odpowiedniej tablicy pobranej z textArea. Numerujesz id inputow od 1 a  szufladki w tablicy mamy od 0, więc musiałem odejmować 1 od id inputa.  

Tworzymy tablice o długości rownej ilości inputów rozdzieloną "\n" a potem do odpowiedniej szufladki ( czyli po this.id - 1 ) dodajemy text z inputa.

const textArea = document.getElementById('textarea1');
const inputsParent = document.getElementById("inputsParent");

const inputs = inputsParent.children;

let addEventListeners = (elements, eventType, event) => {
   const collection = (elements.length) ? elements : Array.of(elements);
for(let element of collection){
element.addEventListener(eventType, event);
}

};

function bindToTextArea(){
   let textAreaValue = textArea.value;
   const id = parseInt(this.id);
   
   
if(!textAreaValue){
     textAreaValue = "\n".repeat(inputs.length);
     textAreaValue = textAreaValue.split("");
     textAreaValue[id - 1] = this.value + "\n";
     textArea.value = textAreaValue.join("");
     return;
   }

  
  let textAreaAsArray = textAreaValue.split("\n");
  textAreaAsArray[id - 1] = this.value;
  textArea.value = textAreaAsArray.join("\n");
}

function bindToInputs (){
  let textAreaAsArray = this.value.split("\n");

  
  if(textAreaAsArray.length > inputs.length){
    let diff = textAreaAsArray.length - inputs.length;
    textAreaAsArray.splice(inputs.length, diff);
  }
 
  textAreaAsArray.forEach((value, index) => {
    if(inputs[index].value !== value){
      const id = inputs[index].id;
      const input = document.getElementById(id);
      input.value = value;
    }
  });
   
}

 addEventListeners(inputs, "input", bindToTextArea);
addEventListeners(textArea, "input", bindToInputs);

warunek w bindToInputs jest po to aby nie robiło więcej szufladek w tablicy niż jest inputów. Wszystko poza pierwszymi 5 linijkami nie działa na inputy.

Kod nie jest mega skomplikowanie  napisany ,chociaż na pewno dałoby się łatwiej , dasz sobie radę .

Comments

wielkie dzieki