programing

클릭시 버튼 텍스트 변경

javaba 2021. 1. 14. 23:05
반응형

클릭시 버튼 텍스트 변경

내가 클릭하면 myButton1버튼을, 나는 값을 변경할 Close Curtain에서 Open Curtain.
HTML :

<input onclick="change()" type="button" value="Open Curtain" id="myButton1"></input>

자바 스크립트 :

function change();
{
    document.getElementById("myButton1").value="Close Curtain";
}

지금 버튼이 열린 커튼을 표시하고 있는데 커튼을 닫도록 변경하고 싶습니다. 맞습니까?

질문을 올바르게 이해했다면 '커튼 열기'와 '커튼 닫기'사이를 전환하여 닫혀 있으면 '커튼 열기'로 변경하거나 그 반대의 경우도 마찬가지입니다. 그것이 당신이 필요한 것이라면 이것이 작동 할 것입니다.

function change() // no ';' here
{
    if (this.value=="Close Curtain") this.value = "Open Curtain";
    else this.value = "Close Curtain";
}

사용할 필요는 document.getElementById("myButton1")없습니다로 불리는 내부 변화를 문맥 의 myButton1JS에 대한 책을 읽고, 나중에 알고 나는 문맥에 의해 무엇을 의미하는지 당신이 올 것이다 -.

업데이트 :

내가 틀렸어. 앞서 말했듯 this이 요소 자체를 언급하지 않습니다. 이것을 사용할 수 있습니다 :

function change() // no ';' here
{
    var elem = document.getElementById("myButton1");
    if (elem.value=="Close Curtain") elem.value = "Open Curtain";
    else elem.value = "Close Curtain";
}

<button>요소 (또는 기타?)를 사용할 때 '값'을 설정하면 텍스트가 변경되지 않고 변경 innerHTML됩니다.

var btn = document.getElementById("mybtn");
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';

콘솔에 인쇄 될 때 :

<button id="mybtn" class="btn btn-primary" onclick="confirm()" value="my value">my text</button>

단순한 오타 오류가있는 것 같습니다.

  1. change () 뒤에 세미콜론을 제거하십시오. 함수 선언에 아무 것도 없어야합니다.
  2. myButton1 선언 앞에 따옴표를 추가합니다.

수정 된 코드 :

<input onclick="change()" type="button" value="Open Curtain" id="myButton1" />
...
function change()
{
    document.getElementById("myButton1").value="Close Curtain"; 
}

더 빠르고 간단한 해결책은 버튼에 코드를 포함하고 this 키워드를 사용하여 버튼에 액세스하는 것입니다. 

<input onclick="this.value='Close Curtain'" type="button" value="Open Curtain" id="myButton1" />

많은 방법이 있습니다. 그리고 이것은 모든 브라우저에서도 작동해야하며 요소 자체를 함수에 전달하기 때문에 더 이상 document.getElementById를 사용할 필요가 없습니다.

<input type="button" value="Open Curtain" onclick="return change(this);" />

<script type="text/javascript">
function change( el )
{
    if ( el.value === "Open Curtain" )
        el.value = "Close Curtain";
    else
        el.value = "Open Curtain";
}
</script>

id =에 여는 따옴표가없고 함수 선언 뒤에 세미콜론이 있습니다. 또한 입력 태그에는 닫는 태그가 필요하지 않습니다.

이것은 작동합니다 :

<input onclick="change()" type="button" value="Open Curtain" id="myButton1">

<script type="text/javascript">
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
</script>

이것은 vbs 코드로 쉽게 수행 할 수 있습니다 (js에 익숙하지 않기 때문에) 

<input type="button" id="btn" Value="Close" onclick="check">
<script Language="VBScript">
sub check
if btn.Value="Close" then btn.Value="Open" 
end sub
</script>

그리고 당신은 끝났지 만 이것은 이름을 표시 만 변경하고 {onclick} 기능을 변경하지 않습니다. 두 번째 작업을 수행하는 방법에 대한 몇 가지 연구를 수행했으며 다음과 같은 것이없는 것처럼 보입니다.

btn.onclick = ".."

하지만 < "span"> 태그를 사용하는 방법을 알아 냈습니다.

<script Language="VBScript">
  Sub function1
  MsgBox "function1"
  span.InnerHTML= "<Input type=""button"" Value=""button2"" onclick=""function2"">"
  End Sub

   Sub function2
  MsgBox "function2"
  span.InnerHTML = "<Input type=""button"" Value=""button1"" onclick=""function1"">"
  End Sub
  </script>
  <body>
  <span id="span" name="span" >
  <input type="button" Value="button1" onclick="function1">
  </span>
  </body>

직접 시도해보고 sub function1 및 sub function2의 코드를 변경하십시오. 기본적으로 jscript에서 만들기 위해 알아야 할 것은 줄뿐입니다. 

span.InnerHTML = "..."

나머지는 실행하려는 코드입니다.

이것이 도움이되기를 바랍니다 : D

html 마크 업 (자바 스크립트) 외부에 이벤트를 바인딩하려면 다음과 같이 할 수 있습니다.

document.getElementById("curtainInput").addEventListener(
  "click",
  function(event) {
    if (event.target.value === "Open Curtain") {
      event.target.value = "Close Curtain";
    } else {
      event.target.value = "Open Curtain";
    }
  },
  false
);
<!doctype html>
<html>
<body>
  <input 
         id="curtainInput" 
         type="button" 
         value="Open Curtain" />
</body>

</html>

이 시도,

<input type="button" id="myButton1" value="Open Curtain" onClick="javascript:change(this);"></input>
<script>
function change(ref) {
    ref.value="Close Curtain";
}
</script>

<input type="button" class="btn btn-default"  value="click me changtext"               id="myButton1" onClick="changetext()"  >

            <script>
            function changetext() {
                 var elem = document.getElementById("myButton1");
                if (elem.value=="click me change text")
                    { 
                        elem.value = "changed text here";
                    }
                else
                 {
                     elem.value = "click me change text";
                 }
            }
            </script>

jQuery에 반대하지 않거나 이미 사용 중이라면 눈에 띄는 js를 사용할 필요없이이를 수행 할 수 있습니다. 도움이 되었기를 바랍니다. https://en.wikipedia.org/wiki/Unobtrusive_JavaScript 또한 이에 대한 논의를 위해 https://stackoverflow.com/a/3910750/4812515 를 참조 하십시오.

HTML :

    <input type="button" value="Open Curtain" id=myButton1"></input>

자바 스크립트 :

          $('#myButton1').click(function() {
            var self = this;
            change(self);
         });

          function change( el ) {
           if ( el.value === "Open Curtain" )
           el.value = "Close Curtain";
           else
           el.value = "Open Curtain";
          }

<!DOCTYPE html>
<html>
    <head>
      <title>events2</title>
    </head>
    <body>
      <script>
        function fun() {
          document.getElementById("but").value = "onclickIChange";
        } 
      </script>
      <form>
        <input type="button" value="Button" onclick="fun()" id="but" name="but">
    </form>
  </body>
</html>

이것은 나를 위해 잘 작동했습니다. 입력 값 텍스트를 '범위 추가'에서 '범위 제거'로 전환하려는 여러 버튼이 있습니다.

<input type="button" onclick="if(this.value=='Add Range') { this.value='Remove Range'; } else { this.value='Add Range'; }" />

이 함수를 스크립트에 추가

function myFunction() {

                var btn = document.getElementById("myButton");

                if (btn.value == "Open Curtain") {
                    btn.value = "Close Curtain";
                    btn.innerHTML = "Close Curtain";
                }
                else {
                    btn.value = "Open Curtain";
                    btn.innerHTML = "Open Curtain";
                }

            }

버튼을 편집

<button onclick="myFunction()" id="myButton" value="Open Curtain">Open Curtain</button>

또는 요소의 이름을 지정할 필요없이 더 간단합니다 ( 'button'요소 사용).

<button onclick="toggleLog(this)">Stop logs</button>

및 스크립트 :

var bWriteLog = true;

function toggleLog(elt) {

  bWriteLog = !bWriteLog;
  elt.innerHTML = bWriteLog ? 'Stop logs' : 'Watch logs';
}

var count=0;
document.getElementById("play").onclick = function(){


if(count%2 =="1"){

                document.getElementById("video").pause();
                document.getElementById("play").innerHTML ="Pause";
            }else {

            document.getElementById("video").play();
            document.getElementById("play").innerHTML ="Play";

            }
            ++count;

This is simple way to change Submit to loading state   

 <button id="custSub" type="submit" class="button left tiny" data-text-swap="Processing.. &nbsp;">Submit &nbsp;<i class="fa fa-angle-double-right"></i></button>


    <script>
    jQuery(document).ready(function ($) {

        $("button").on("click", function() {
          var el = $(this);
          if (el.html() == el.data("text-swap")) {
            el.html(el.data("text-original"));
          } else {
            el.data("text-original", el.html());
            el.html(el.data("text-swap"));
          }
          setTimeout(function () {
                el.html(el.data("text-original"));
           }, 500);
        });

    });
    </script>

참조 URL : https://stackoverflow.com/questions/10671174/changing-button-text-onclick

반응형

'programing' 카테고리의 다른 글

Application Loader 용 업로드 파일을 만드는 방법은 무엇입니까?  (0) 2021.01.14
XML 스키마 네임 스페이스에 대한 Spring NamespaceHandler를 찾을 수 없습니다. [http://www.springframework.org/schema/security]  (0) 2021.01.14
RequireJs-정의 대 요구  (0) 2021.01.14
버튼의 텍스트와 아이콘의 수직 정렬  (0) 2021.01.14
사용자 정의 개체의 addEventListener  (0) 2021.01.14

'programing'의 다른글

  • 현재글클릭시 버튼 텍스트 변경

관련글

댓글

티스토리툴바