How can I anchor an image so text does not move it?-CodePudding

TLDR: How to prevent img from being repositioned when another element above is manipulated by JS.

I am in an introduction to coding course, and this week we were creating a calculator which would allow the user to input a number and receive a total cost based on this quantity (using shirts for an example). I wanted to add a .gif below this calculator, although the .gif is being shifted down when the total amount is displayed on the screen after the user submits their number.

There is already space between the input/button and the .gif below, but the text being added to the screen will move the .gif further down. I tried using a <br clear="top"> thinking that it may wrap the text from the top to stop interference, but that did not seem to work. I also tried position: absolute but that did not work either. Upon inputting an answer with the button, I have it written so var message = "Your total for " v " shirts is $" total; document.querySelector("#paragraph-1").innerHTML = message; and this message is what is impacting the .gif. The image has automatic margins set on CSS img{ width: 50%; display: block; margin-left: auto; margin-right: auto;.

Here is a link for live editing: https://jsfiddle.net/6fom3syt/

Thank you for your time and I appreciate any feedback!

CodePudding user response：

One easy way to solve it:

<p id="paragraph-1">&nbsp</p>

don't leave the p element empty.

CodePudding user response：

There are several ways to do what you want, but the easiest is to use the position: absolute on the paragraph. By setting the position: relative to the paragraph container, when you use position: relative on the paragraph, the latter will refer directly to the container, adding bottom: -3rem to position it below the input and left and translate to center it, the result should be what you want.

var cost = 9.99;
var subtotal;

document.querySelector("#button-1").onclick = click
//console.log(document);

function click(){
    var i = document.querySelector("#input-1");
    var v = i.value;
    console.log(typeof(v));
    var subtotal = cost*v; //coercion
    var total = addTax(subtotal);
    total = total.toFixed(2);
    var message = "Your total for " v " shirts is $" total;
    document.querySelector("#paragraph-1").innerHTML = message;


    //console.log("button has been clicked", v, subtotal, total);
    if(v==1){
        var message2 = "Your total for " v " shirt is $" total;
        console.log(message2);
        document.querySelector("#paragraph-1").innerHTML = message2
    }
    else{
        console.log(message);
    }
}

function addTax(num){
    //var taxRate = 0.13;
    //var taxAmount = num*taxRate;
    //var total = num taxAmount;
    var tax = 1.13;
    var total = num*tax;

    //console.log(total);
    return total
}

h1{
    color: antiquewhite;
    text-align: center;
    font-family: 'Georgia', Times New Roman, Times, serif;
}
#container{
    width: 70%;
    margin: auto;
    text-align: center;
    position: relative;
}
#paragraph-1 {
  position: absolute;
  bottom: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
}

body{
    background-color: rgb(95, 147, 119);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: antiquewhite;
}
button{
    background-color:rgb(95, 147, 119);
    color: antiquewhite;
    border-color: antiquewhite;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    cursor:pointer;
}
input{
    background-color: rgb(95, 147, 119);
    color:antiquewhite;
    border-color:antiquewhite;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
img{
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" type = "text/css" href = "m3.css">
    </head>

<body>
    <div id = "container">
        <h1 id= "mainHeading">module 3: functions</h1>
        <h2>How many shirts would you like to buy?</h2>
        <button id="button-1">submit</button>
        <input id="input-1" type="number">
        <p id="paragraph-1"></p>
    </div>
    <br clear="top">
    <p><img src = https://media3.giphy.com/media/3o6Mb7jQurR1B7mM5G/giphy.gif>
    </p>
    <script src="m3.js"></script>
</body>
</html>

(You should still make it responsive or make the text not wrap, otherwise the space you used between the input and the image is not enough.)

CodePudding user response：

One of the easies way is to handle by css. like

has some minimum height so UI looks more good. https://jsfiddle.net/6fom3syt/

#paragraph-1{
  min-height:30px;
}