1

I have an function that creates an array of html buttons:

function getButtons() { // buttons that participants see in the selection phase.
  var trialButtons = [
  '<button class="jspsych-btn" style="color:blue; font-size: 20px; background-color:#CD6155; border-width: 2px; position:absolute; left: 120px; top:20px;  width:210px; height:170px" >%choice%</button>',
  '<button class="jspsych-btn" style="color:blue; font-size: 20px; background-color:#D7BDE2; border-width: 2px; position:absolute; left: 120px; top:220px; width:210px; height:170px" >%choice%</button>',
  '<button class="jspsych-btn" style="color:blue; font-size: 20px; background-color:green;   border-width: 2px; position:absolute; left: 120px; top:420px; width:210px; height:170px" >%choice%</button>',
  '<button class="jspsych-btn" style="color:blue; font-size: 20px; background-color:#F4D03F; border-width: 2px; position:absolute; right:120px; top:20px;  width:210px; height:170px" >%choice%</button>',
  '<button class="jspsych-btn" style="color:blue; font-size: 20px; background-color:#DC7633; border-width: 2px; position:absolute; right:120px; top:220px; width:210px; height:170px" >%choice%</button>',
  '<button class="jspsych-btn" style="color:blue; font-size: 20px; background-color:#BDC3C7; border-width: 2px; position:absolute; right:120px; top:420px; width:210px; height:170px" >%choice%</button>',
  '<button class="jspsych-btn jspsych-btn_instructions" style="position:absolute; left:180px; bottom:30px;" >%choice%</button>'
  ];
  myButtons = [];
  myButtons.push(trialButtons);
  return myButtons[myButtons.length -1];
}

How can I manipulate my array to change the style of all the buttons? For example how could I change all the buttons to have border-color:red?

Improve this question
3
  • 1
    Instead of duplicating tons of style rules, can't you just use a class, and put styles for that class in a CSS stylesheet so you can edit them in one place? Commented Jan 20, 2021 at 20:27
  • Is it an option to have an array of button objects instead of an array of strings? E.g. [{class: 'www', btn_name: 'My button', style: {color: 'blue'}}] etc? Anything short of that would require some regex to search and replace string patterns. Commented Jan 20, 2021 at 20:28
  • @codemonkey I think an array of objects would be okay if I can convert it to a string array eventually, and it's not too burdensome to write all include all the variations (left/right, top, background color) Commented Jan 20, 2021 at 20:46

3 Answers 3

Reset to default
1 

var trialButtons = [
  '<button class="jspsych-btn" style="left: 120px; top:20px;" >%choice%</button>',
  '<button class="jspsych-btn" style="left: 120px; top:220px;" >%choice%</button>',
  '<button class="jspsych-btn" style="left: 120px; top:420px;" >%choice%</button>',
  '<button class="jspsych-btn" style="right:120px; top:20px;" >%choice%</button>',
  '<button class="jspsych-btn" style="right:120px; top:220px;" >%choice%</button>',
  '<button class="jspsych-btn" style="right:120px; top:420px;" >%choice%</button>',
  '<button class="jspsych-btn jspsych-btn_instructions" style="left:180px; bottom:30px;" >%choice%</button>'
  ];


  // TO ADD SOME STYLE::
  trialButtons = trialButtons.map(each => each.replace('style="', 'style="border-color:red; '))
  
  console.log(trialButtons)

  // TO REMOVE SOME STYLE::
  trialButtons = trialButtons.map(each => each.replace('border-color:red; ', ''))
  
  console.log(trialButtons)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

What you can do instead of writing down plaintext for buttons, is creating actual elements:

const button = document.createElement("button");
button.innerHTML = "%choice%";
button.backgroundColor = "#CD6155";

Then you can build upon that and easily say something along the lines of:

button.borderColor = "red";
Improve this answer

2 Comments

Similar to above I think this gets me 80% of the way there but I'll still need to end of with an array of buttons which have some slight different properties (left/right; top; and background-color)
@John-Henry what you can do is creating a new seperate variable for each of the buttons (e.g. button0, button1, ..., button6), configure them to your liking and then writing const trialButtons = [button0, button1, ..., button6]; This leaves you with an array of buttons you can iterate over with trialButtons.foreach(button => {//adjustments here})
1

Instead Write a code something like this and then in Css use it to style it like this

.jspysch-btn {color:blue; font-size: 20px; background-color:#CD6155; border-width: 2px; position:absolute; left: 120px; top:20px;  width:210px; height:170px)

Then if you want to change any values use

document.getElementsByClass("jspysch-btn").style.THINGYOUWISHTOCHANGE = CHANGE;

Then if you want to change unique Values per each give each button its own unique ID <button id = "UniqueId"> Then change only its style, you can use these in unison too like

document.getElementsByClass("jspysch-btn").style.borderColor = 'red'; 
document.getElementById("UniqueId").style.color = 'blue';
Improve this answer

3 Comments

I think this is the right idea, just that I'll need to make 6 buttons, that have similar features, but also have different left/right; top; and background-color
Well then you can add a special ID for each like <button id = "UniqueId"> and then if you need to change specifically that one use document.getElementById("UniqueId").style.change = change;
That should make it good, so then you could change all of them using document.getElementByClass("jspysch-btn").style.color = 'blue'; and then use document.getElementByClass("UniqueID").style.marginLeft = '10px';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.