I have a user-generated paragraph that consists of a list of words separated by commas, such as "dog, cat, hamster, turtle." I want to be able to individually assign attributes to each word in the list.
Check out this image for reference
In the example image provided, instead of having a shared border and color for all words in the list, I would like to give each word its own distinct border and spacing between them. Is this something that can be achieved?
Check out this method for achieving the desired outcome (but remember to attempt solving it independently next time):
If your HTML looks like this:
<div id="sample">apple, banana, orange</div>
Your JavaScript code should be:
function separateItems() {
var element = document.getElementById("sample");
var itemsArray = element.innerHTML.split(", ");
element.innerHTML = "";
for (var j = 0; j < itemsArray.length; j++) {
var newSpan = document.createElement("span");
var itemValue = itemsArray[j].trim();
newSpan.innerHTML = itemValue;
element.appendChild(newSpan);
}
}
separateItems();
CSS styling:
#sample span { padding: 4px 6px; background-color: #f0f0f0; margin: 0 8px; border-radius: 5px;}
Hey there Henrik! If you're looking to style a specific word with some special CSS, you can do that by using the span tag like:
<span class="highlight">Highlighted Text</span>
Then in your CSS file, you would add:
.highlight{color: yellow;}
If you want to add a border as well, you can create another class like
.border-highlight{border: 2px solid yellow;}It may get a bit more complex if the content is generated dynamically, but it's definitely achievable. Hope this solution works for you!
Ahhh, the trick is to use Indexof to separate each word and then apply unique CSS to them individually.
After spending multiple days searching and reading, I am struggling to set an initial value for the data from a Rails JSON file in my application. The app focuses on incident tickets, and although I am able to retrieve all entries from the database using d ...
How can I log items from index 1 to 5 in the current array by using a loop? let cars = ["AUDI","BMW","LEXUS","VOLKSWAGEN","FERRARY","PORSCHE"] for (let i = 0; i < cars.length; i++) { if (i >= 1 && i <= 5) { console.log("The current ...
I'm encountering an issue when trying to update key values within an object. It seems to be adding duplicate values or combining all values together instead of assigning each name a specific language slug. I can't figure out where I'm going ...
I am encountering an issue with adding comments from HTML form elements to an array in AngularJS. Whenever I try to use the Javascript push function, I receive an error stating "property of object doesn't exist". Can someone assist me in resolving thi ...
I am encountering difficulties while navigating between pages in my React Native application. Whenever I try to use the button, an error message pops up saying: TypeError: undefined is not an object (evaluating '_this.props.navigation'). My app c ...
Having trouble setting up eslint for my project. When I try to run eslint --init, I keep getting this error: /usr/lib/node_modules/eslint/lib/cli.js:18 let fs = require("fs"), ^^^ SyntaxError: Unexpected strict mode reserved word at exports.runInThis ...
Currently, I am utilizing Casper for UI testing on websites. My main concern is regarding the compatibility testing in various browsers such as IE, Chrome, and Firefox using Casper. If this cannot be achieved with Casper, I am open to alternative methods ...
I am currently facing an issue with making an ajax call to my controller class PatientRecordController < ApplicationController def export .... end end Within my javascript file, the code snippet is as follows: $(document).ready(function(){ ...
I am working on a form that includes a button and an input field. When the user clicks on the button "ADD MORE FIELDS," I want to dynamically generate a new input box. Although I have tried using code from this jsfiddle link and it works, my goal is to ach ...
When attempting to display an image, I encountered a 404 error even though the folder containing it is being served properly. Code snippet from JSX file: render: function(){ ... return <button type="button" id="powerButton" onClick={this.someFun}>& ...
I'm in the process of developing a chat application with PHP. Everything is functioning properly, but I have encountered a potential loophole. I am implementing AJAX to fetch chat data as the user scrolls, similar to platforms like Facebook and Twitte ...
I am facing an issue with dynamically importing SVG icons in React Native. Initially, I tried using the following code snippet: const icon = require(`@src/assets/icons/${iconName}`) However, after realizing that this approach wouldn't work for me, I ...
Currently, I am in the process of writing tests for my website using WebdriverIO with Mocha and Chai. However, I encountered an issue where my element is not rendered before attempting to interact with it. it('select application', function(done) ...
My database has a table named user which includes a field called last_seen. I am looking to regularly update this field with the current timestamp every 5 seconds. ...
Looking for a unique design for your website background? How about a triangle split with black on one side and white on the other, like this image? I can't seem to find this online, so any help would be greatly appreciated. Is it possible to achieve t ...
Is there a way to make it so that pressing a button will display a specific class, and if another button is pressed, the previous class is removed and a new one is shown? Thank you for your assistance. function myFunction() { document.getElementById ...
I've integrated the CKEDITOR plugin for a format toolbar feature on my web application. It seems that the message shown above is a default one provided by CKEDITOR. My goal is to have users start with a blank textarea every time they visit the page, ...
Currently, I am in the process of refactoring my code and have decided to revisit how I handle on events by utilizing mapping. Below is a snippet of what I currently have: $('img#sorc').on({ mousemove: function (e) { alert('tes ...
Using a third party JavaScript application, I have integrated and invoked a function within one of my AngularJS factories. This function requires the id of a DOM element as a parameter, as it manipulates this element. ThirdPartyApp.doSomething("#elementId ...
My webpage features a button that displays correctly in Chrome, but the text inside the button gets cut off when viewed in IE (see image). Can you provide guidance on what might be causing this issue and how to resolve it? Bootstrap version 4.0.0 is also b ...