홈>2020-02-01 00:29

javascript - 사용자가 버튼을 클릭 할 때 텍스트 영역과 버튼을 표시하는 방법 (모달은 아님)

이 양식에서 사용자가 버튼을 클릭하면 사용자가 클릭 한 버튼 아래에 텍스트 영역과 버튼이 표시됩니다. 미리 송장이나 메모와 비슷합니다. 텍스트 영역에서 사용자는 일반 텍스트만으로 메모 나 수정본을 작성할 수 있습니다. 이것은 버튼 코드 <button type="button" id="revision" onclick="myFunction()" class>Revision</button> 의 예입니다 그리고 이건 자바 스크립트

<script> 
function myFunction() { 
document.getElementById("demo").innerHTML = <textarea style="resize: none; width: 400px; height: 100px;" type="text" class="form-control" rows="3"></textarea>;}
</script>

시도했지만 버튼에 텍스트 영역이 표시되지 않았습니다. 정말 감사합니다

javascripthtmlcss

답변 # 1

append 를 사용할 수 있습니다 DOM 요소를 동적으로 삽입하는 기능.

function myFunction() {
  let textarea = document.createElement('textarea');
  textarea.classList = ['form-control'];
  textarea.rows = 4;
  document.getElementById("demo").append(textarea);
}

<button onclick="myFunction()">
Add Text Area
</button>
<div id="demo"></div>

답변 # 2

다음은 원하는 작업을 수행하지만 다른 방법으로 수행 할 수 있습니다

function myFunction() { 
document.getElementById("demo").innerHTML = `<textarea style="resize: none; width: 400px; height: 100px;" type="text" class="form-control" rows="3"></textarea>`;
}

<button onclick="myFunction()">Show TextArea</button>
<div id="demo"></div>

할 수있는 것은 텍스트 영역을 숨기고 버튼을 클릭하면 표시하는 것입니다;

function myFunction() {
  document.getElementById("myTextarea").style.display = "block";
}

<button onclick="myFunction()">Show TextArea</button>
<textarea id="myTextarea" style="resize: none; width: 400px; height: 100px; display: none;" type="text" class="form-control" rows="3"></textarea>

답변 # 3

<script> 
function myFunction() {
 if(true)
  document.getElementById("demo").style.display = "block";
 else
 document.getElementById("demo").style.display = "none";
}
</script>

Python2.net

javascript - 사용자가 버튼을 클릭 할 때 텍스트 영역과 버튼을 표시하는 방법 (모달은 아님)

관련 자료