I am working on an HTML page that has a TextArea and label. My goal is to create CSS classes in the TextArea and apply them to the label:
<textarea id="txtCSS" name="txtCSS" rows="4" cols="50">
.FC{color:green;}
</textarea>
<label class="FC">Some Text</label>
Can someone guide me on how to achieve this?!
Give this a try
const addCSS = function() {
const [_,className,style] = document.getElementById("txtStyle").value.match(/\.(\w+){(.*)}/)
document.querySelector("."+className).style=style;
}
document.getElementById("txtStyle").addEventListener("input",addCSS)
addCSS()<textarea id="txtStyle" name="txtStyle" rows="4" cols="50">
.highlight{background-color:yellow;}
</textarea>
<p class="highlight">Highlighted text</p>Insert the text from the textarea into the style element.
input event on the textarea to capture any new content being added.style element using the ID previewStyle. If it exists, append the text. Otherwise, create a new style element and add the content there.View the live demonstration here
function render(value) {
let previewStyle = document.getElementById('previewStyle');
if(!previewStyle) {
addStyle(value);
}else {
previewStyle.innerText = value;
}
}
function addStyle(styles) {
/* Creating style element */
const css = document.createElement('style');
css.type = 'text/css';
css.id = 'previewStyle';
if (css.styleSheet){
css.styleSheet.cssText = styles;
} else {
css.appendChild(document.createTextNode(styles));
}
/* Appending style to the head tag */
document.getElementsByTagName("head")[0].appendChild(css);
}
const text = document.getElementById('txtCSS');
text.addEventListener('input', (e) => {
const content = e.target.value;
render(content);
});
render(text.value);
Consider using a library to replace the current textarea for enhanced code highlighting, such as:
After setting up an open source project, I found that the mocha tests are running successfully. However, I am facing a challenge when trying to debug the functions being called by these tests. Every time I attempt to debug using 'mocha --debug-brk&apo ...
I've come across an issue with a three.js scene within an Angular custom directive in the view. At the top, there's a navigation bar for switching between views (pretty standard so far). I set up a simple scene with a cube and basic camera rotati ...
For my One Page project, I want a DIV element to increase in height when scrolling down, but maintain that increased height when scrolling up. Currently, I am utilizing JQuery with the code snippet below: $(function(){ $(window).scroll(function() { ...
I am currently working on building an imagePicker in ReactNative, but I am running into an issue when trying to select the image. The error message I am receiving is: TypeError: this.setState is not a function. (In 'this.setState ({ avatar: data}) &a ...
Is there a way to retrieve the source of the current page using JavaScript and DOM? Do I need to utilize AJAX for this task? ...
This Vue component is called ColorButtonGroup, and it serves as a group of checkbox/toggle buttons. It has a maximum limit of 4 colors that can be selected. The component utilizes another component called ToggleButton, which is a simple toggle selection w ...
Users have been reporting that my existing single-page web application is not performing well, but unfortunately I can't change the code. To address this issue, I want to track the loading time in the following manner: Record the timestamp of when a ...
I am looking to access a $scope variable within this controller in order to utilize Angular functions like ng-click and ng-change in my HTML. Currently, I am only able to use the $http function but unable to execute any Angular methods on it. I am struggli ...
I'm encountering a problem that is somewhat similar (although not exactly the same, so please be patient) to the one discussed in Conditionally-rendering css in html head I am dynamically loading a stylesheet using a scope variable defined at the sta ...
I'm intrigued by the scenario where you expect a specific data type as a response from fetch / Axios / etc, but receive a different type instead. Is there a way to identify this discrepancy? interface HttpResponse<T> extends Response { parsed ...
In the design I'm currently working on, there is a requirement for a border around a table row. Due to certain complications, using the border property directly is not an option. In trying to find a solution, I have experimented with two different app ...
I am having trouble loading a second controller to populate a select in my view. Despite my efforts, it just won't cooperate. This is the code snippet I'm using: app.js (function() { 'use strict'; angular .module('app.lazylo ...
My server has a socket server running, and on my laptop, I have a socket.io-client service. When both are turned on, they establish a connection. When other users request information from my server, the server sends that request to my laptop via a socket. ...
I've been struggling to center my Container in the middle of the page using Bootstrap 4. I haven't had much luck so far. Any suggestions would be greatly appreciated. You can check out what I have so far on Codepen.io and experiment with it to s ...
I encountered the following error: module not found error To address this issue, I took the following steps: Commented out import 'vuetify/src/stylus/main.styl' in the src/plugins/vuetify.js file. Added import 'vuetify/src/styles/main. ...
When I send the email data to this.user in the constructor, it gets stored in AppComponent. Next, I need this variable in the function getUserData to import some data...but the console.log shows undefined, and there is also an error for users: Cannot read ...
I am currently working on an HTML/JavaScript program that involves running two counters. The issue I am facing is with the reset counter functionality. The 'initCounter' method initializes two counters with a given initial value. Pressing the &a ...
Is there a reliable method for preserving type information during JSON serialization/deserialization of Typescript objects? The straightforward JSON.parse(JSON.stringify) approach has proven to have several limitations. Are there more effective ad-hoc sol ...
When it comes to centering a <th> element inside an <li>, different browsers have different approaches. In Internet Explorer, Edge, and Safari, the <th> is center-justified. However, in Chrome, Firefox, and Opera, it's left-justifie ...
Exploring the realm of Javascript and JSON, I find myself faced with a challenge - accessing values in an unnamed JSON array. Unfortunately, as this is not my JSON file, renaming the array is out of the question. Here's a snippet of the JSON Code: [ ...