v2.5.2
Giriş yap

input ile div e yazı yazdırırken alt satıra geçtiğimi algılamıyor

damnman
505 defa görüntülendi

İnputa yazdığım

dive yazdırdığı

Ben ise yine alt alta yazdırmasını istiyorum.

Cevap yaz
Cevaplar (4)
bbera
1202 gün önce

aslında bakarsan css ile bir çözüm var

<div class="multiline">
   lorem ipsum
   lorem ipsum sit amet
</div>
.multiline {
  white-space: pre-wrap;
}
makifgokce
1202 gün önce

ister eklerken ve düzenlerken kullan

let myObj = {
    title: addTitle.value,
    text: addTxt.value.replace("\n", "<br>")
  }

istersende gösterirken

`
<h3 class="note-title"> ${element.title} </h3>
<p class="note-text"> ${element.text.replace("\n", "<br>")}</p>
`
damnman
1202 gün önce

@makifgokce burdaki kodlara nasıl entegre edebilirim :(


$(function(){
  $('#notesBaslik #addNote').click(function(){
    $('#notes-main').fadeIn(200)
  });

  $('#notes-main #container1 form #close-btn').click(function(event){
    zortEngelle(event);

    $('#notes-main').fadeOut(200)
  })
});

function zortEngelle(event) {
  event = event || window.event;
  event.preventDefault();
  return (false);
}

function ekleVeKapat() {
  $('#notes-main').fadeOut(200)
}

function noteEdit() {
  $('#notes-main').fadeIn(200)
}


let addBtn = document.getElementById("add-btn");
addBtn.addEventListener("click", function(e, event) {

  zortEngelle(event);


  let addTitle = document.getElementById("note-title");
  let addTxt = document.getElementById("note-text");
  
    if (addTitle.value == "" || addTxt.value == "") {
        return alert("Please add Note Title and Details")
    }

  let notes = localStorage.getItem("notes");
  if (notes == null) {
    notesObj = [];
  } else {
    notesObj = JSON.parse(notes);
  }
  let myObj = {
    title: addTitle.value,
    text: addTxt.value
  }
  notesObj.push(myObj);
  localStorage.setItem("notes", JSON.stringify(notesObj));
  addTxt.value = "";
  addTitle.value = "";
  
  ekleVeKapat();
  showNotes();
});

function showNotes() {
  let notes = localStorage.getItem("notes");
  if (notes == null) {
    notesObj = [];
  } else {
    notesObj = JSON.parse(notes);
  }
  let html = "";
  notesObj.forEach(function(element, index) {
    html += `
        <div class="note">
            <h3 class="note-title"> ${element.title} </h3>
            <p class="note-text"> ${element.text}</p>
            <button id="${index}"onclick="deleteNote(this.id)" class="note-btn"><i class="fas fa-times-circle"></i></button>
            <button id="${index}"onclick="editNote(this.id)" class="note-btn edit-btn"><i class="fas fa-edit"></i></button>
        </div>
            `;
  });
  let notesElm = document.getElementById("notes");
  if (notesObj.length != 0) {
    notesElm.innerHTML = html;
  } else {
    notesElm.innerHTML = `No notes yet! You can add notes using the add note button above.`;
  }
}

function deleteNote(index) {
  let notes = localStorage.getItem("notes");
  if (notes == null) {
      notesObj = [];
  } else {
      notesObj = JSON.parse(notes);
  }

  notesObj.splice(index, 1);
  localStorage.setItem("notes", JSON.stringify(notesObj));
  showNotes(); 
}

function editNote(index) {
    let notes = localStorage.getItem("notes");
    let addTitle = document.getElementById("note-title");
    let addTxt = document.getElementById("note-text");

    if (addTitle.value !== "" || addTxt.value !== "") {
      return alert("Please clear the form before editing a note")
    } 

    if (notes == null) {
      notesObj = [];
    } else {
      notesObj = JSON.parse(notes);
    }
    //console.log(notesObj);

    notesObj.findIndex((element, index) => {
      addTitle.value = element.title;
      addTxt.value = element.text;
    })
    notesObj.splice(index, 1);
        localStorage.setItem("notes", JSON.stringify(notesObj));
        noteEdit();
        showNotes();
}

showNotes();
makifgokce
1203 gün önce
<textarea id="txt"></textarea>
<div id="out"></div>
let txt = document.getElementById("txt")
let out = document.getElementById("out")

txt.addEventListener("keyup", function() {
  	out.innerHTML = txt.value.replace("\n", "<br>")
})