按钮点击不止一次，javascript中的不同文本答案

【问题标题】：Button onclick more than once, different text in javascript按钮点击不止一次，javascript中的不同文本
【发布时间】：2014-05-15 07:17:52
【问题描述】：

所以我做了这个按钮，然后我改变了描述文本

{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，以便在您下次单击按钮时使描述文本更改为“另一个文本”。

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 按钮，每次单击时将文本更改为不同的文本？

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

【问题讨论】：

为什么每次都需要修改文字？？
从哪里获取新文本？或者你在“No..”和“Another text”之间切换？
@jenz 我需要它，因为我想让它看起来像一个对话框，每次单击按钮时文本都会发生变化。我只成功地更改了一次文本，并且只需单击一次。
@BhushanKawadkar 抱歉，我不太确定你在问什么：/
@Yuki DEMO - 这是我的版本。这样的事情对我来说更有意义。

标签： javascript jquery html css button

【解决方案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]);
    });
});

【讨论】：

我认为这是迄今为止最灵活的方法
不错！好吧，这是一个偏好问题，我更喜欢可读性:)。但还是不错的编辑。
我也是，看起来很棒！但后来我在这里试了一下：/yosougay.tumblr.com，但它似乎不起作用..
好吧，请记住，您需要包含在此解决方案中的 jquery 库。
@MarkRijsmus 哦，你的意思是这必须放在我主题中的 javascript 代码之前吗？ stackoverflow.com/questions/18576419/…

【解决方案2】：

当然可以。

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

您要做的是在单个 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;"/>

【讨论】：

【解决方案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 />

【讨论】：

【解决方案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() 中删除参数的。

【讨论】：

【解决方案5】：

Fiddle

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

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

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];
}

【讨论】：