Combining Two Buttons
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have two buttons that toggle the view in a small application. I'd like to have it be 1 button instead of two so that the current view is the button text, eg. view 1, view 2- so that the user knows what view they're looking at.

How might I accomplish this? Here's some code the demonstrates what I have now.

Please let me know if I can provide more info to help you produce a solution. Thanks in advance.

Crowdsource coding tasks.

3 Solutions


You can access the text of these buttons with innerHtml. If you give them Ids you can change the text with
document.getElememtById("id-of-the-button").innerHTML = "Your new Text"

Winning solution

HTML:

<button onclick="changeView(1);">Toggle View <span id="viewText">(Front)</span></button>
<button onclick="dropText();">Drop Text</button>
<div style="text-align: center">
  <canvas id="canvas1"></canvas>
  <canvas id="canvas2"></canvas>
</div>

JS:

var activeCanvas, canvas1, canvas2, view=false; 

$(function() {
  $viewText = document.querySelector("#viewText");  
  canvas1 = new fabric.Canvas('canvas1');
  canvas2 = new fabric.Canvas('canvas2');
  changeView(1);
});

function changeView(value) {
  if (view) {
    $viewText.textContent = "(Back)";
    activeCanvas = canvas1;
    $('#canvas1').parent().css('display', 'block');
    $('#canvas2').parent().css('display', 'none');
  } else {
    $viewText.textContent = "(Front)";
    activeCanvas = canvas2;
    $('#canvas1').parent().css('display', 'none');
    $('#canvas2').parent().css('display', 'block');
  }
  view = !view;
}

function dropText() {
  var text = new fabric.Text('test');
  activeCanvas.add(text);
}
JSFiddle: http://jsfiddle.net/tf2g4v2e/
kostasx 3 months ago
This looks great, thank you.
sharper 3 months ago
You're welcome. Thank you for the donation.
kostasx 3 months ago
View Timeline