I am working on a school assignment where I need the values changed in a table to apply to a div. Despite searching online, I haven't been able to find the solution. The blue box represents the div and the text on the left should dictate the properties:
To set up JavaScript variables, define them like so:
let container_height;
let container_width;
Next, you must link these variables to the respective divs in your text boxes. For example:
container_height = document.getElementById('height_input_box').value;
container_width = document.getElementById('width_input_box').value;
Finally, you can modify the box properties using the following code:
document.getElementById('myContainer').style.height = container_height + "px";
For interaction purposes, connect all of this to an onclick event within a function, like so:
function adjustContainer()
{
document.getElementById('myContainer').style.height = container_height + "px";
}
A demonstration has been set up and working for you, accessible here. I trust this meets your requirements.
HTML
<table>
<tr>
<td>Left</td>
<td><input type="text" id="left-input"/>
</tr>
<tr>
<td>Top</td>
<td><input type="text" id="top-input"/>
</tr>
<tr>
<td>Width</td>
<td><input type="text" id="width-input"/>
</tr>
<tr>
<td>Height</td>
<td><input type="text" id="height-input"/>
</tr>
<tr>
<td>Color</td>
<td><input type="text" id="color-input"/>
</tr>
<tr>
<td>Background Color</td>
<td><input type="text" id="background-color-input"/>
</tr>
<tr>
<td>Text</td>
<td><input type="text" id="text-input"/>
</tr>
<tr>
<td></td>
<td><button type="button" id="save-button">Save</button></td>
</tr>
</table>
<div id="result"></div>
CSS
td {
border: 1px solid black;
}
JavaScript
const leftInput = document.getElementById('left-input');
const topInput = document.getElementById('top-input');
const widthInput = document.getElementById('width-input');
const heightInput = document.getElementById('height-input');
const colorInput = document.getElementById('color-input');
const textInput = document.getElementById('text-input');
const backgroundColorInput = document.getElementById('background-color-input');
const saveButton = document.getElementById('save-button');
const applyValues = () => {
const left = leftInput.value + "px";
const top = topInput.value + "px";
const width = widthInput.value + "px";
const height = heightInput.value + "px";
const color = colorInput.value;
const backgroundColor = backgroundColorInput.value;
const text = textInput.value;
/*
* You probably want to use `result.style.marginLeft` and `result.style.marginTop`.
*/
result.style.left = left;
result.style.top = top;
result.style.width = width;
result.style.height = height;
result.style.color = color;
result.style.backgroundColor = backgroundColor;
result.innerHTML = text;
console.log(result);
}
saveButton.addEventListener('click', applyValues);
I have a specific number of arrays, each containing a set amount of elements. Each element consists of two attributes represented by numbers. { start: x end: y } These start and end numbers define a range, where the start value is always smaller tha ...
Trying to locate the ID of an ASP.Net control in JavaScript is proving challenging as it keeps showing "ID not found." While I have reviewed various related questions, they all pertain to ASP forms or similar, whereas I am utilizing DIV tags here, resultin ...
My template is divided into three sections: header, footer, and content. The main menu links are located in the header section. I am trying to apply a CSS class 'active' to the hyperlink that is selected. I have written jQuery code to achieve thi ...
Is there a way to adjust the height of only the xAxis label area on a 3D column chart using Highcharts? I've come across some solutions in various threads, but none seem to work as expected. Can anyone help me identify what might be causing this issue ...
Need help displaying the result of a JavaScript statement in an HTML page instead of console.log output. I am new to coding! Here is the JS code snippet: $.ajax({ url: 'xml/articles.json', dataType: 'json', type: ...
Seeking assistance to add a glow effect to a div when hovered using jQuery. Below is the code snippet: HTML <div class="tablerow"> <div class="image"> <img src="1.jpg"> </div> <div class="info"> ...
I'm struggling with a seemingly simple problem that I just can't seem to solve. I'm trying to get the height of my div element, but for some reason it keeps returning 0. Even when I inspect the element in Chrome, it shows me a height. Here&a ...
Is there a way to change the color of my burger bar lines using event listeners? I'm trying to target the spans that make up the burger menu lines by assigning them a class "span". Here's what I have: var distFromTop = document.querySelector(".o ...
I'm encountering an issue while attempting to access the data in a POST request. Even after using console.log(req.body), I only receive an empty {}. My suspicion is that the error may lie somewhere within the markup? Below is the relevant client-sid ...
After scraping a webpage with BeautifulSoup and requests, I came across this snippet of code within the HTML content: $create(Web.Scheduler, { "model": '{"apt":[0]}', "timeZone": "UTC", "_uniqueI ...
Looking for some help with my code: export default class Contact extends React.Component { constructor(props) { super(props); this.state = { password: '', redirect: false, username: '' }; ...
With the Azure function app, my goal is to download images from various URLs and store them in a specific folder. I then need to zip these images and send the zip file back as a response. I have successfully achieved this by following these steps: Send ...
I'm having trouble aligning a v-btn to the right side. Despite trying various options, I can't seem to get it to work. I just want to know the simplest way to ensure that the register button is positioned at the very right of the column. For the ...
I'm experiencing an issue with the flash message on my local machine during development, as it works fine there but not when I deploy the app on Heroku. I've been searching for a solution without any luck so far. api/policies/flash.js module.ex ...
Hello everyone, I need some help with media queries. I've been working on a website that is already responsive. However, I am required to write the code in a child theme rather than directly in the original files. When I attempt to add new media quer ...
Is there a way to load the contents of a js file into a variable without it returning as an object? How can I achieve this? server.js const file = require("./server/file.js"); ctx.body = `${file}`; // The expected output is "(function () { ...
I managed to implement some features into jQuery datatables by following tutorials. However, I am struggling to combine these features and make them work together seamlessly. If you search for these features online, you will likely find where they originat ...
Currently, I am utilizing the map() function to target the child elements within my dropzone: $('#DropZone div').map(function(i, item){ }) The structure of the dropzone is as follows: <div id="DropZone"> <div id="firstImage"> ...
I've been struggling with defining a new function, and I need help resolving it. Here's an example that I was initially referencing: Pass arguments into ajax onreadystatechange callback? I wasn't able to find the solution through research, ...
I am seeking a solution to retrieve the User ID from the users table using either JavaScript or Laravel. But why do I need it? The reason is that I want to populate a modal window popup with specific user information. I currently have 10 users, each with ...