I want to create a text box where users can input color keywords like blue, lime, or black. When they click submit, I want the background color of the page to change accordingly.
This is what I have so far:
<label for="color">Color: </label><input type="text" name="color" size="20" id="color" />
<button type="button" onClick="javascript:changeBGC(color)">Submit</button>
And in my script:
function changeBGC(color){
document.bgColor = color;
}
Give this a try:
document.body.style.backgroundColor = document.getElementById('color').value;
The code above changes the background color of the body based on the value of an input element with the id 'color'.
If you want to learn more about setting CSS styles using JavaScript, check out this documentation.
Here's a live example on JSFiddle for you to experiment with.
Alternatively, you have the option to modify the code as shown below:
<input type="button" onClick="updateBackground(color.value)">Click Here</input>
^
Alternatively, you have the option to utilize a more effective method
<label for="shade">Shade:</label>
<input type="text" name="shade" size="20" id="shade" value=""/>
<button type="button">Enter</button>
var input = document.getElementById('shade');
var button = document.querySelector('button');
button.addEventListener('click', function( event ) {
event.preventDefault();
var shade = input.value;
document.body.style.background = shade;
});
I need help figuring out how to create a variable in my script that is defined by the width attribute of a CSS class. The snippet I have currently doesn't seem to work as expected. var dist = $('.nav').css(width()); The goal of my script i ...
Visit this website to see the effect in action: I am curious about how the image scrolls into and out of the direction where the mouse enters and leaves. Can you explain how this is achieved? ...
My model definition includes: appFeatures: [{ name: String, param : [{ name : String, value : String }] }] I am looking to assign a default value to appFeatures, such as: name: 'feature', para ...
Each time the download bar shows up at the bottom, the slideshow content on the Homepage suddenly moves up. It returns to its original position after I close the download bar.https://photos.app.goo.gl/F482eMfkXyfEZkdA9. My assumption is that this issue is ...
The output on the page only displays 17 out of 60+ rows of data. I've searched online for a javascript function to help with this, but unfortunately, I couldn't find one. Here is a sample code snippet: <script type="text/javascript"> ...
There is a form on my webpage, which includes the following elements: <div v-if="this.userdata.address == ''">Please enter your address</div> Your address <input type="text" v-model="userdata.address" ...
Greetings! I am currently developing a website using Vue, but I have encountered an issue. Initially, I tried using router.go(-1) to prevent access through the address bar (e.g., from ../client/mypage to ../admin/mypage) and to redirect to the previous pag ...
When you log into Twitter and have Direct Message enabled, a "Send Message" button will appear. Can someone please provide the URL for sending a DM to a specific user? I tried looking at the code but I could use some assistance. Any thoughts? Thank you in ...
Trying to show an image and text side by side, I'm using the following code: div.out { background-color: silver; border: 1px solid black; padding: 10px; display: flex; } div.right { order: 1; background-color: white; border: 1px soli ...
In my setup, I have two vital components in play. The initial one is responsible for presenting a list of items, while the second dictates the design and layout of these items. These items reside in an array located within the app.vue file. Here lies my p ...
When it comes to adding styles to an HTML element from methods, I ran into a small hiccup. Here's what I tried: <div class="add-profile-img" v-bind:style="getBackgroundImg()"> The method in question is: getBackgroundImg: function() { return { ...
I need to retrieve all objects that have a specific 'id' within a nested array. Specifically, I want to find all person objects with hobbies id of 2 (hiking) in the provided sample data. This inquiry tackles the challenge of extracting all value ...
I've encountered a issue with removing cookies from my browser when logging out. It seems that I need to specify the domain in order to remove them correctly. $cookies.remove('Name',{domain:'.test123.com'}); My goal is to automat ...
I need to create a Jagged Edge border without relying on an image, and I want it to be compatible with IE9 and newer versions. Currently, it works in most browsers but not in IE9. Any suggestions or advice would be greatly appreciated. Thank you! Below is ...
Looking to customize the background color of a material UI RaisedButton, I have encountered a challenge. This is what I currently have: const style = { backgroundColor: 'green' }; export default class CreateLinksave extends React.Component { ...
I am having trouble using functions in a select element loaded within a div using AJAX in jQuery. Can anyone offer assistance? Here is the snippet of jQuery code: $("#cbo_sede").change(function () { var sede = document.getElementById("cbo_sede").val ...
I am facing challenges with the compatibility of my CSS code for HTML checkboxes. In certain versions of Internet Explorer and when I insert the live HTML into my PowerPoint presentation, the center div overlaps with the left div causing the entire page to ...
Why is the CodePen not functioning properly in Safari? Despite working well in Chrome and Firefox, it completely fails to work in Safari 7.1+. Can anyone provide some insights? http://codepen.io/cchambers/pen/Dyldj $(document).on("mousemove", function( ...
I have been struggling to understand the concept of refreshing tokens after reading numerous articles on the topic. They all seem too convoluted for me to grasp. Could someone please simplify it for me? Here is an overview of what I am trying to achieve: ...
There is a similar question which addresses input elements having a minimum width determined by the size parameter. I am attempting to create a layout with an inline-flex element with a flex-direction: column property like this: .item { border: 1px s ...