alternativer Schaltflächentext automatisch ohne Klicken

Question

Ich möchte zwischen 2 Stücken Text auf einer Taste in 2 sec Intervallen alternieren. Dies ist kein Klickereignis. Ich möchte nur die Schaltfläche zwischen "Klicken Sie hier" und "Download" drehen. Dies ist, was ich ohne Glück versuche:

<div class="assetClass customButton1_1Div" id="download_btn1"> 
<input type="button" class="customButton1_1" name="button1_1" value="click here" title="download_btn1" /> 
</div> 

setInterval(toggle, 2000); 
function toggle() { 
document.getElementByName("button1_1").value = "download"; 
} 

Answer 1

So ähnlich?

var cnt=0, arr = ['Click Here','Download']; 
 
setTimeout(toggle, 1500); 
 

 
function toggle() { 
 
    $('.btn').val(arr[cnt]); 
 
    cnt = (cnt > 0) ? 0 : 1; 
 
    setTimeout(toggle, 1500); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="assetClass customButton1_1Div" id="download_btn1"> 
 
    <input type="button" class="btn" value="Download" /> 
 
</div>

Man beachte, dass setInterval gewisse Nachteile hat im Vergleich zu einem rekursiven SetTimeout:

http://www.erichynds.com/blog/a-recursive-settimeout-pattern

Answer 2

document.getElementsByName ist Plural und gibt eine Sammlung zurück.

Plain JS:

window.onload = function() { 
 
    setInterval(function() { 
 
    var but = document.getElementsByName("button1_1")[0]; 
 
    but.value = but.value == "click here" ? "download" : "click here"; 
 
    }, 1000); 
 
}

<div class="assetClass customButton1_1Div" id="download_btn1"> 
 
    <input type="button" class="customButton1_1" name="button1_1" value="click here" title="download_btn1" /> 
 
</div>

jQuery den alternativen Wert der Schaltfläche Hinzufügen:

$(function() { 
 
    var $but = $("input[name='button1_1']").first(); 
 
    var showVal = true,butVal = [$but.val(), $but.data("alternate")]; 
 
    setInterval(function() { 
 
    showVal=!showVal; 
 
    $but.val(butVal[+showVal]); 
 
    }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="assetClass customButton1_1Div" id="download_btn1"> 
 
    <input type="button" class="customButton1_1" name="button1_1" value="Click here" title="download_btn1" data-alternate="Download" /> 
 
</div>

Answer 3

Ich habe verwendet jQuery und die Umschaltfunktion verändert aktuellen Wert zu überprüfen; Wenn "download" nicht übereinstimmt, wird der Wert auf "download" gesetzt. Wenn es übereinstimmt, wird der Wert auf "hier klicken" gesetzt.

https://jsfiddle.net/tg7ks727/

$(function(){ 
    setInterval(ToggleText, 2000); 
}); 

    function ToggleText() { 
    var currentValue = $('input').attr("value"); 
    console.log(currentValue); 
    if(currentValue != "download"){ 
     $('input').attr("value", "download"); 
    } 
    else { 
     $('input').attr("value", "click here"); 
    } 
    }