Enhancing a collection of HTML buttons

Question

Enhancing a collection of HTML buttons

I am trying to modify an array of HTML buttons using a JavaScript function called getButtons:

function getButtons() { // This function generates buttons displayed 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];
}

I am wondering how I can update my button styles across all buttons. Specifically, is there a way to change the border-color property of all buttons to red?

javascript arrays

Answer 1

Answer №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>'
  ];


  // MAKING SOME STYLISH CHANGES::
  trialButtons = trialButtons.map(each => each.replace('style="', 'style="border-color:red; '))
  
  console.log(trialButtons)

  // REVERSING THE STYLE CHANGES MADE EARLIER::
  trialButtons = trialButtons.map(each => each.replace('border-color:red; ', ''))

  console.log(trialButtons)

Answer 2

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>'
  ];


  // MAKING SOME STYLISH CHANGES::
  trialButtons = trialButtons.map(each => each.replace('style="', 'style="border-color:red; '))
  
  console.log(trialButtons)

  // REVERSING THE STYLE CHANGES MADE EARLIER::
  trialButtons = trialButtons.map(each => each.replace('border-color:red; ', ''))

  console.log(trialButtons)

Answer 3

Answer №2

Instead of simply typing out text for buttons, consider creating actual button elements using JavaScript:

const newButton = document.createElement("button");
newButton.innerHTML = "Click me";
newButton.style.backgroundColor = "#CD6155";

You can then easily customize the button further by adding styles like this:

newButton.style.borderColor = "red";

Answer 4

Instead of simply typing out text for buttons, consider creating actual button elements using JavaScript:

const newButton = document.createElement("button");
newButton.innerHTML = "Click me";
newButton.style.backgroundColor = "#CD6155";

You can then easily customize the button further by adding styles like this:

newButton.style.borderColor = "red";

Answer 5

Answer №3

If you want to write code similar to this and style it using CSS, you can do the following:

.custom-btn {color:green; font-size: 18px; background-color:#3498DB; border-width: 3px; position:relative; left: 50px; top:10px; width:200px; height:150px)

To change any values, use the following code snippet:

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

If you want to assign unique values to each button, give them their own IDs like so:

<button id = "UniqueID">

You can then change the styles individually or collectively as shown below:

document.getElementsByClass("custom-btn").style.borderColor = 'purple'; 
document.getElementById("UniqueID").style.fontWeight = 'bold';

Answer 6

If you want to write code similar to this and style it using CSS, you can do the following:

.custom-btn {color:green; font-size: 18px; background-color:#3498DB; border-width: 3px; position:relative; left: 50px; top:10px; width:200px; height:150px)

To change any values, use the following code snippet:

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

If you want to assign unique values to each button, give them their own IDs like so:

<button id = "UniqueID">

You can then change the styles individually or collectively as shown below:

document.getElementsByClass("custom-btn").style.borderColor = 'purple'; 
document.getElementById("UniqueID").style.fontWeight = 'bold';

Enhancing a collection of HTML buttons

Answer №1

Answer №2

Answer №3

Similar questions

Issue with AJAX/JavaScript causing an alert to not pop up

Using globs to specify files for gulp.src

What is the best way to prevent a function from running unnecessarily multiple times?

Assign the initial pointer of a 2D array to another pointer

What is the best way to adjust the value of largePageDataBytes in Next.js?

Is it advisable to use an autosubmit form for processing online payments?

What is the process of moving items from one object array to another in C++?

Guide to transforming Excel formulas into JavaScript

Passing a JavaScript variable to PHP through AJAX seems to be a difficult task

Is there any specific reason not to use a short HTML/CSS syntax like <div a b c></div>?

Tips for sending arguments up in Angular2

React-navigation installation in React Native project failed due to ENOENT error - file or directory does not exist

Identify and react to an unexpected termination of an ajax upload process

I encountered an issue where the data I passed to a component ended up being undefined

Why won't my Laravel AJAX request work after refreshing the page?

User controls and the window.onload event handler

Conceal an element using a transition effect, initiating its positioning at the center instead of the default

What are the distinctions between allocating memory for local and global arrays in the C programming language?

Changing the Angular form based on the value selected from the drop-down menu

Simulation of loopback session