0

So I tried to make a simple website to take input on the all-time high/low points of a stock and return its Fibonacci Retracement levels, displayed inside of a <div> element. The HTML/JS is shown below:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Stock Manager</title>
        <script src="script.js"></script>
    </head>
    <body>
        <form autocomplete="off" id="inputForm" style="width: 50%; margin-left:auto; margin-right: auto; padding: 20px; background-color: #eee; text-align: center;">
            <input type="text" placeholder="All Time High" id="highInput" style="width: 75%; text-align: center;" onchange="adjustVariables()"><br/><br/>
            <input type="text" placeholder="All Time Low" id="lowInput" style="width: 75%; text-align: center;" onchange="adjustVariables()"><br/><br/>
            <input type="text" placeholder="Trend (up/down)" id="trendInput" style="width: 75%; text-align: center;" onchange="adjustVariables()"><br/><br/>
            <button onclick="displayResults()">Submit</button>
            <div id="result" style="font-size: 18px; font-weight: bold; width: 75%; margin-left: auto; margin-right: auto; text-align: left;">

            </div>
        </form>
    </body>
</html>

JS

var high = null;
var low = null;
var trend = "";
var fib1 = null;
var fib2 = null;
var fib3 = null;
const fib1const = 0.236;
const fib2const = 0.382;
const fib3const = 0.618;
function adjustVariables() {
    high = document.getElementById("highInput").value;
    low = document.getElementById("lowInput").value;
    trend = document.getElementById("trendInput").value;
}
function displayResults() {
    var elapsed = high - low;
    if (trend == "up") {
        fib1 = fib1const * elapsed;
        fib2 = fib2const * elapsed;
        fib3 = fib3const * elapsed;
    } else {
        fib1 = fib3const * elapsed;
        fib2 = fib2const * elapsed;
        fib3 = fib3const * elapsed;
    }
    document.getElementById("result").innerHTML = "ATH Resistance: " + high + "\n" + 
                                                  "Fib1 Res/Sup: " + fib1 + "\n" +
                                                  "Fib2 Res/Sup: " + fib2 + "\n" +
                                                  "Fib3 Res/Sup: " + fib3 + "\n" +
                                                  "ATL Support: " + low;
}

The div is initially empty but is filled with the output data by the JS. The problem, however, is that the div returns to being empty less than half a second after it updates with its new contents.

  • Because you are using a form submit button therefore submitting a form and reloading the page – Patrick Evans May 25 '18 at 20:15
  • 1
    Add `type="button"` to the button, it may be submitting the form. – DjaouadNM May 25 '18 at 20:17
  • Or don't use a `
    ` tag. Just because you have a "form" does not mean you have to use the `
    ` tag if you are not going to be submitting the data anywhere.
     – Mikey May 25 '18 at 20:18
  • If you need a form, use `
    `, and have `displayResults()` return false, and remove the `onclick="displayResults()"` from the button `onclick()` event..
     – Victor Stoddard May 25 '18 at 20:20

0 Answers0