Looking for some advice on a small project

I had an idea to create a “broken button”. The goal of this button was to generate a circular randomly colored (red or green) button. I want different text to display depending on the color. For example, when red is selected as the fill for the object, I would like text such as “broken” to appear. When green is selected, I would like no text to appear. I have the button set up to randomly select red or green on click as well as when it is created. I tried to add if/if else statements after to recognise the color and print the wanted text, but instead it seems that when I run the code, the if statement meant to recognize the color overwrites the fill color entirely. This may get down to semantics or some form of array separation aka the scope of some of the code. Any help is greatly appreciated. This is my first test of my knowledge and I’ve tried many times, different ways.

1 Like

Normally with D3, you can use 1 argument in .attr() to read the current value: brokenbutton.attr('fill') should return the current color. Unfortunately, the app gives an error, because it’s looking for 2 arguments.

We can avoid this by storing the color we assign to the button’s fill. I called it newColor below.

The app also doesn’t update the console after adding D3 elements, so we’ll have to use a different way to show text. D3 can create text elements, similar to creating a rectangle. It uses .text() to set the text to appear. It also uses 'x', 'y', 'fill'properties, so you can move it around and color it. To change the size, you can use .style('font-size', 36). Here is a workaround you can use to create .text() and .style() keys.

var brokenbutton = svg.append('circle');
var textSection = svg.append('text').attr('x', 140).attr('y', 200);

var color = ['red','green'];

brokenbutton.on('click', () => {
  var newColor = pickRandom(color);
  brokenbutton.attr('fill', newColor);
  if (newColor === 'red') {
    textSection.text('broken');
  } else {
    textSection.text('');
  }
}).attr('cx', 160).attr('cy', 120).attr('r', 50);

–Frankie

1 Like

This looks great, I must say. You made my day. I’m super excited to create my broken button!

1 Like

I copied that code you sent as well as I could, until I could not locate a .text button to click after textSection. Have I made a mistake? Sorry, I forgot to click on the “here” shortly before the code. My bad, will update soon.


I viewed the “here” section and copied the code. The original was meant to add a .push if I am correct, but as of this time a .push exists within playground. I mean to create a .text via this method in the “wonky workaround” I am now a bit lost.

Yes, the original workaround was to create a .push() button, but you could alter that example to get a .text() button:

let foo = {
  text: (bar) => {
  }
};

This code creates an object called foo (the name doesn’t matter). That object has a property called .text. And the value of the .text property is a function (the name of the function doesn’t matter, nor the parameter, but you’ll want to have some parameter name in there). This will make the .text() button rather than .text.

–Frankie

1 Like

Do something exciting