Question

所以我做了这个按钮，我从

改变了描述文字

{description}

点击后，

到“否......”。这就是我所做的：

function changeText(txt){
    document.getElementById('name').innerHTML = txt;
}

<p> 
    <b id='name'>{description}</b>.
</p>
<input type='image' 
    onclick='changeText("No...")' 
    src='http://i.imgur.com/4y6bzH9.png' 
    style="margin-left: 540px; margin-bottom: 20px; position: absolute; outline: none;"/>

如果您愿意，可以查看我在/ http://yosougay.tumblr.com/

上所做的事情

我尝试在同一个按钮上再次单击另一次时更改描述文本，所以我尝试添加另一个onClick，以便在下次单击按钮时将描述文本更改为“另一个文本”。 / p>

function changeText(txt){
    document.getElementById('name').innerHTML = txt;
}

<p> 
    <b id='name'>{description}</b>. 
</p>
<input type='image' 
    onclick='changeText("No...")';
    onclick='changeText("Another text")';src='http://i.imgur.com/4y6bzH9.png'
    style="margin-left: 540px; margin-bottom: 20px; position: absolute; outline: none;" />

我测试了它，它没有用。请问，是否可以制作一个JavaScript按钮，在每次单击时将文本更改为不同的文本？

到目前为止，我只能让两个文本更改一次。

Answer 1

尝试这样的事情：http://jsfiddle.net/54pp2/2/

<input id="click" type="button" value="click" />
<label id="test">Test</label>


$(document).ready(function () {
    var textArray = [];
    textArray[0] = 'test 1';    
    textArray[1] = 'test 2';    
    textArray[2] = 'test 3';    
    textArray[3] = 'test 4';    

    var idx = 0;
    $('input#click').on('click', function(){
        idx++;
        var newidx = idx % textArray.length;
        $('label#test').text(textArray[newidx]);
    });
});

Answer 2

当然可以。

您只能以这种方式绑定一个点击侦听器。复制属性onclick只会覆盖第一个属性，不会提供两个点击监听器。

你想要做的是每次处理＆＃34;不同的文字＆＃34;在你单身onclick听众。

<script> 
  var txts = ["first", "second", "third"]
  var counter = 0;
  function changeText() {
    document.getElementById('name').innerHTML = txts[counter%3];
    counter++;
  }
</script>

<p> 
    <b id='name'>{description}</b>.
</p>
<input type='image' 
       onclick='changeText()' 
       src='http://i.imgur.com/4y6bzH9.png' 
       style="margin-left: 540px;
              margin-bottom: 20px;
              position: absolute; 
              outline:  none;"/>

Answer 3

我认为这就是你想要的

<script>
<!-- 

 $(document).ready(function(){

     var textarray ={"No...","Another Text"};
     var count = 0;
     $('input[type="image"]').click(function(){
         $('#name').text(textarray[count]);
         count = count==0?1:0;
     });
 });

 // -->
 </script>
 <p> <b id='name'>{description}</b>. </p>
 <input type='image' onclick='changeText("No...")' src='http://i.imgur.com/4y6bzH9.png'
 style="margin-left:540px; margin-bottom:20px; position:absolute; outline:none;"/>
 <br /><br />

Answer 4

您可以跟踪从javascript内点击按钮的次数。

<script>
var clicked = 0;
function changeText(){
    if (clicked == 0) {
         document.getElementById('name').innerHTML = "No...";
    }
    else if (clicked == 1) {
         document.getElementById('name').innerHTML = "Another text";
    }
    clicked++;
}
</script>

注意我是如何从changeText（）中删除参数的。

Answer 5

<强> Fiddle

我的建议是将onclick更改为onclick='changeText()'。

将文本存储在数组中，并在元素上使用count属性。这也将移至第一个文本，并在第三次单击时重复。

var texts = [
    'No',
    'Another text'
];

function changeText(){
    var elem  = document.getElementById('name');
    if(typeof elem.count == 'undefined'){
        elem.count = 0;   
    } else {
        elem.count++;   
    }

    if(elem.count == texts.length){
        elem.count = 0;   
    }

    elem.innerHTML = texts[elem.count];
}

按钮onclick不止一次，javascript中的不同文本

5 个答案: