我想要這個java腳本來顯示下面的按鈕不在按鈕上的答案，請看看

所以基本上這個代碼使文本在按鈕上，但我希望它顯示在按鈕下面，所以每次我點擊按鈕上的文本將更新爲以下幾點：https://jsfiddle.net/santon/mc15vy4f/ < -----例如我想要這個java腳本來顯示下面的按鈕不在按鈕上的答案，請看看

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

var clickTracker = { 
     count:0, 
    getMessage: function() { 
    var message; 

    switch(this.count) { 
     case 1: message = "You pushed the button"; break; 
     case 2: message = "You pushed the button (again)."; break; 
     case 3: //fall Through 
     case 4: //fall Through 
     case 5: //fall Through 
      message = "You pushed the button "+ this.count + " times."; break; 
     default: message = "Stop pushing the button"  
    } 
    return message; 
    } 
}; 


function processClick() { 
    clickTracker.count++; 
     this.innerHTML = clickTracker.getMessage(); 
} 

myBtn.addEventListener("click", processClick);

來源

2015-10-15 Kashyap Sa

那就這樣做。目前，您正在將文本分配給按鈕。您使用不同元素的問題是什麼？如果我們不知道您的問題是什麼，我們無法聯繫到您。 –

即時通訊不太確定如何做到這一點 –

你一定已經想過* * *。你是否完全熟悉DOM API？最簡單的解決方案可能是在按鈕之後添加一個帶有一些ID的新元素，並添加到'document.getElementByID（'someID'）'而不是'this'。 –

在這一行：

this.innerHTML = clickTracker.getMessage();

你告訴按鈕來改變它的內部HTML。如果你想爲text/html的按鈕後出現，你可以做到以下幾點：

var myBtn = document.getElementById("myButton"); 
var textContainer; 

var clickTracker = { 
     count:0, 
    getMessage: function() { 
    var message; 

    switch(this.count) { 
     case 1: message = "You pushed the button"; break; 
     case 2: message = "You pushed the button (again)."; break; 
     case 3: //fall Through 
     case 4: //fall Through 
     case 5: //fall Through 
      message = "You pushed the button "+ this.count + " times."; break; 
     default: message = "Stop pushing the button"  
    } 
    return message; 
    } 
}; 


function processClick() { 
    clickTracker.count++; 
     var text = clickTracker.getMessage(); 
     if(!textContainer){ //checking if container is not yet set 
      textContainer = document.createElement("div"); //creating the element 
      this.parentElement.appendChild(textContainer);//appending to parent of button 
     } 
     textContainer.textContent = text; 
} 

myBtn.addEventListener("click", processClick);

來源

2015-10-15 03:29:40 Saar

它不工作的原因，你可能會張貼在這個鏈接，並嘗試運行它https://jsfiddle.net/santon/mc15vy4f/ –

完美作品：https://jsfiddle.net/mc15vy4f/7/ – Saar

更改HTML這樣的：

<button id="myButton">Click Me</button> 
<p id="stat"></p>

JS代碼：

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

var clickTracker = { 
    count:0, 
    getMessage: function() { 
     var message; 

     switch(this.count) { 
      case 1: message = "You pushed the button"; break; 
      case 2: message = "You pushed the button (again)."; break; 
      case 3: //fall Through 
      case 4: //fall Through 
      case 5: //fall Through 
       message = "You pushed the button "+ this.count + " times."; break; 
      default: message = "Stop pushing the button"  
     } 
     return message; 
    } 
}; 


function processClick() { 
    clickTracker.count++; 
    document.getElementById("stat").innerHTML = clickTracker.getMessage(); 
} 

myBtn.addEventListener("click", processClick);

來源

2015-10-15 03:33:07

我想要這個java腳本來顯示下面的按鈕不在按鈕上的答案，請看看

回答

相關問題