How can I edit the text of the paragraph and then load the answer?-CodePudding

`I am trying to be able to edit the text of the paragraph by pressing a button and then pressing enter to save it.

this is the html button code:


                    <div  onclick="edit_about_me()">
                        <div  ><a href="#" ><i><span  >edit</span></i></a>
                    </div>

this is the code of the paragraph:

            <div >
                    <div >
                            <p id="about-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt harum repellat quos optio atque pariatur earum culpa, quisquam dignissimos nulla, maxime mollitia assumenda saepe, quae obcaecati expedita consequatur alias corporis.</p>
                            <input id="btn-edit-about" type="text" oninput="new_text(this.value)" style="display:none">
                        </div>
            </div>

I have been trying to use these functions in javascript but they are not working. I still can't find the error. The input does not appear when I click the button, but it takes the text when I print it by console.

function edit_about_me(){
    document.getElementById("btn-edit-about").style.display="block";
    let text = document.getElementById("about-text").innerText;
    console.log(text)
}
document.addEventListener("DOMContentLoaded", function() {
    const btnEdit = document.getElementById("btn-edit-about");
    if (btnEdit) {
        btnEdit.addEventListener("click", edit_about_me);
    }
});

function new_text(value){
    document.getElementById("about-text").innerText=value;
}

document.addEventListener('DOMContentLoaded', function() {
    let input = document.getElementById('btn-edit-about');
    if (input) {
        input.addEventListener('keyup', (e) => {
            if (e.code === "Enter") {
                console.log("Enter was press");
                let button = document.getElementById('btn-edit-about');
                if (button) {
                    button.style.display = "none";
                }
            }
        });
    }
}, false);



function showFile(input){
    let file = input.files[0];
    let reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function(){
        document.getElementById('about-text').innerText=reader.result;
    };
    reader.onerror = function(){
        console.log(reader.error);
    }
}

CodePudding user response：

In your input element remove "oninput" because that overwrites the text every time. In the keyup function get the value from the event and select the paragraph by id and use innerHTML to rewrite it. This is the changes I made. Please let me know if it works for you.

 <input id="btn-edit-about" type="text" style="display: none">

function () {
          let input = document.getElementById("btn-edit-about");
          if (input) {
            input.addEventListener("keyup", (e) => {
              if (e.code === "Enter") {
                console.log("Enter was press");
                let text = document.getElementById("about-text");
                let enteredText = e.target.value;
                text.innerHTML = enteredText;
                let button = document.getElementById("btn-edit-about");
                if (button) {
                  button.style.display = "none";
                }
              }
            });