input resetting with JavaScript doesn't work

Question

This is the part of HTML code

<div id="contentBack">
    <label for="origin">평문</label><br /><br />
    <input type="text" name="origintoBack" id="origin">

    <label for="lockSent">암호문</label><br /><br />
    <input type="text" name="lockSent" id="lockSent"><br />

    <br />

    <button id="backKey"><i class="fas fa-key fa-2x"></i></button>
    <button id="unlockBtn"><i class="fas fa-lock-open fa-2x"></i></button>
</div>

I'd like to reset <input type="text" name="lockSent" id="lockSent"><br /> if I click the button. So I put

document.getElementsByName("origintoBack")[0].value = "";

    for (var i = 0; i < originSettingArray.length; i++) { // originSettingArray 크기만큼 돌면서
      document.getElementsByName("origintoBack")[0].value += originSettingArray[i][0] + originSettingArray[i][1] + " "; // 두 글자마다 띄어쓰기 넣기
    } // 뒷면 평문에 평문 출력

and

document.getElementById("lockSent").value = "";
    for (var x = 0; x < lockedArray.length; x++) {
      document.getElementById("lockSent").value += lockedArray[x][0] + lockedArray[x][1] + " ";
    }

in button onclick function in JavaScript code. Resetting the document.getElementsByName("origintoBack")[0].value = ""; works very well but

document.getElementById("lockSent").value = ""; doesn't work. There is no error on console log. I don't know what to do. Please help (;0;

Answer 1

I tried your code, it worked both.

 function reset(){ document.getElementsByName("origintoBack")[0].value = ""; document.getElementById("lockSent").value = ""; } 

 <div id="contentBack"> <label for="origin">평문</label><br /><br /> <input type="text" name="origintoBack" id="origin"> <label for="lockSent">암호문</label><br /><br /> <input type="text" name="lockSent" id="lockSent"><br /> <br /> <button id="backKey"><i class="fas fa-key fa-2x"></i></button> <button id="unlockBtn" onclick="reset();"><i class="fas fa-lock-open fa-2x"></i>Reset</button> </div>