I'm having trouble properly calling the function twice and obtaining the desired output. Can anyone provide assistance?

Question

I'm having trouble properly calling the function twice and obtaining the desired output. Can anyone provide assistance?

I am facing an issue with a function that is supposed to draw a line based on its parameters. The problem arises when I make multiple calls to this function. The first function call yields the expected output, however, subsequent calls do not display the line from the first function call. Instead, only the line from the latest function call is shown. Any suggestions on how to resolve this?

function draw_vertical_line(width, height, linecolor, xpos, ypos) {
  $('.line').css({
    'width': width,
    'height': height,
    'background-color': linecolor,
    'left': xpos,
    'bottom': ypos,
    'position': 'absolute'
  });
}

draw_vertical_line(10, 500, '#357d35', 50, 100); //This line does not show
draw_vertical_line(10, 300, '#357d35', 300, 200); //This line shows

<div class="line"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

javascript html jquery css

Answer 1

Answer №1

I trust that my assistance has been beneficial

        function draw_vertical_line(id, width, height, linecolor, xpos, ypos) {
            $('#'+id).css({
                'width': width,
                'height': height,
                'background-color': linecolor,
                'left': xpos,
                'bottom': ypos,
                'position': 'absolute'
            });
        }

        draw_vertical_line('line1', 10, 500, '#357d35', 50, 100);  
        draw_vertical_line('line2', 10, 300, '#357d35', 300, 200);

    <div id="line1"></div>
    <div id="line2"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Enhanced solution:

function draw_vertical_line(lines) {
    for (let i = 0; i < lines.length; i++) {
        $('#wrap').append('<div class="line' + i + '"></div>');
        $('.line' + i).css({
            'width': lines[i][0],
            'height': lines[i][1],
            'background-color': lines[i][2],
            'left': lines[i][3],
            'bottom': lines[i][4],
            'position': 'absolute'
        });
    }
}

// List of lines
draw_vertical_line([
    [10, 500, '#357d35', 50, 100],
    [10, 300, '#357d35', 300, 200],
    [10, 200, '#cccccc', 100, 400],
    [10, 100, '#888888', 200, 500],
    [10, 300, '#222222', 600, 200]
]);

    <div id="wrap"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 2

I trust that my assistance has been beneficial

        function draw_vertical_line(id, width, height, linecolor, xpos, ypos) {
            $('#'+id).css({
                'width': width,
                'height': height,
                'background-color': linecolor,
                'left': xpos,
                'bottom': ypos,
                'position': 'absolute'
            });
        }

        draw_vertical_line('line1', 10, 500, '#357d35', 50, 100);  
        draw_vertical_line('line2', 10, 300, '#357d35', 300, 200);

    <div id="line1"></div>
    <div id="line2"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Enhanced solution:

function draw_vertical_line(lines) {
    for (let i = 0; i < lines.length; i++) {
        $('#wrap').append('<div class="line' + i + '"></div>');
        $('.line' + i).css({
            'width': lines[i][0],
            'height': lines[i][1],
            'background-color': lines[i][2],
            'left': lines[i][3],
            'bottom': lines[i][4],
            'position': 'absolute'
        });
    }
}

// List of lines
draw_vertical_line([
    [10, 500, '#357d35', 50, 100],
    [10, 300, '#357d35', 300, 200],
    [10, 200, '#cccccc', 100, 400],
    [10, 100, '#888888', 200, 500],
    [10, 300, '#222222', 600, 200]
]);

    <div id="wrap"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 3

Answer №2

An important issue arises when using $(".line") because it will consistently move the same line, resulting in only the last movement being visible.

If you want to add new lines for each call, you can achieve this by:

var div = $("<div>");
div.css({...});
$("body").append(div);

(or replace "body" with your preferred container for the lines if it's not specified)

Alternatively, to streamline the process and leverage jQuery chaining, you can do:

$("<div>").css({...}).appendTo("body");

Here is an updated code snippet:

function draw_vertical_line(width, height, linecolor, xpos, ypos) {
  $("<div>").css({
    'width': width,
    'height': height,
    'background-color': linecolor,
    'left': xpos,
    'bottom': ypos,
    'position': 'absolute'
  }).appendTo('body');
}

draw_vertical_line(10, 500, '#357d35', 50, 100); 
draw_vertical_line(10, 300, '#357d35', 300, 120);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 4

An important issue arises when using $(".line") because it will consistently move the same line, resulting in only the last movement being visible.

If you want to add new lines for each call, you can achieve this by:

var div = $("<div>");
div.css({...});
$("body").append(div);

(or replace "body" with your preferred container for the lines if it's not specified)

Alternatively, to streamline the process and leverage jQuery chaining, you can do:

$("<div>").css({...}).appendTo("body");

Here is an updated code snippet:

function draw_vertical_line(width, height, linecolor, xpos, ypos) {
  $("<div>").css({
    'width': width,
    'height': height,
    'background-color': linecolor,
    'left': xpos,
    'bottom': ypos,
    'position': 'absolute'
  }).appendTo('body');
}

draw_vertical_line(10, 500, '#357d35', 50, 100); 
draw_vertical_line(10, 300, '#357d35', 300, 120);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

I'm having trouble properly calling the function twice and obtaining the desired output. Can anyone provide assistance?

Answer №1

Answer №2

Similar questions

Updating dynamic parameter in a NextJS 13 application router: A complete guide

incorporate information into D3 with React

Unlocking the Power of Observable Objects with Knockout.js

Successfully transferring canvas image to server. Saving empty picture file

Using the same geometric shapes repeatedly leads to occasional texture errors in THREE.JS

How do I utilize Protractor to target a specific div element with a distinctive class and verify its visibility on the page?

Access JSON information from the identical document

Experiencing a 401 error when making an AJAX call to BigCommerce's API

Combining HTML, CSS, JAVASCRIPT, and PHP for a seamless web development experience

"Experience the power of using Selenium with Node.js in an asynchronous function

What is the most efficient method in React for displaying an array as a table and wrapping every set of five elements with a <tr> tag?

What is the best way to display changing data in a React component?

Addressing an error of "call stack full" in nextjs

Angular Persistent States in Angular version 2 and beyond

Expand or collapse Angular Material Accordion depending on selected Radio button choice

Exporting Textures with Custom Offsets to GLTF from Three.js Scene

AWS Amplify-hosted Nuxt applications are resilient to errors during the build process

Fetch information that was transmitted through an ajax post submission

Persisting jQuery UI position in database and showing it on the screen

What is the best way to display a variable (string/int) from a PHP file onto an HTML file?