1

I am trying to import a js file into my .html file and use the function in it but it doesn't seem to be working: script.js

function HidePassword() {
    var x = document.getElementById("passwordInput");
    if (x.type === "password") {
      x.type = "text";
    } else {
      x.type = "password";
    }
  }

newclient.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> Onboarding Portal - New Client</title>
  </head>
  <script type="text/javascript" src="../script.js"></script>
  <body>
    <a href="/" target="_self">
      <button>Back</button>
    </a>
    <center>
      Onboarding Portal
      <br /><br /><br />

      <form method="POST" action="/">
        Password:
        <input
          type="password"
          name="password"
          value=""
          id="passwordInput"
          required
        /><br /><br />
        <input type="checkbox" onclick="HidePassword()" />Show Password
    </center>
  </body>
</html>

Am I missing something here? Should I not use script.js like this?

Edit: here is the structure:

enter image description here

enter image description here

Uncaught ReferenceError: HidePassword is not defined at HTMLInputElement.onclick

from flask import Flask, render_template, request
import onboardingscript
from onboardingscript import onboard_client, add_rec_to_existing_client
import json
from configparser import ConfigParser
import pandas as pd
from onboarding2 import onboard_client2




config_object = ConfigParser()
config_object.read("config.ini")

# create an instance of flask
app = Flask(__name__)

# Rename to the correct snake notation
# instantiate the app in one function -- COMPLETE
# Start adding config files to replace the credentials and other sensitive information
# add more error checking to your calls
# compartmentalize your functions 

def create_app():
    # # print(df)
    @app.route('/')
    def index():
        return render_template('index.html')

    @app.route('/new-client')
    def new_client():
        return render_template('newclient.html')

    @app.route('/existing-client')
    def existing_client():
        return render_template('existingclient.html')

    @app.route('/', methods=['POST'])
    def onboard_new_client():
        # throw all variables captured by form and throw it into script, and run it
        #create a large function that takes in the calls and have it run in sequential order for this
        onboarding_data = {
            'clientFirstName': request.form['clientFirstName'],
            'clientLastName': request.form['clientLastName'],
            'clientId': request.form['clientId'],
            'clientEmail': request.form['clientEmail'],
            'envOption': request.form['env']
        }
        result = onboard_client2(onboarding_data)
        # result = onboard_client(onboarding_data)
        if (result == True):
            return render_template('confirmation.html')
        else:
            return render_template('failure.html')

    @app.route('/a', methods=['POST'])
    def onboard_existing_client():
        onboarding_data = {
            'clientEmail': request.form['clientEmail'],
            'envOption': request.form['env']
        }
        result = add_rec_to_existing_client(onboarding_data)
        if (result == True):
            return render_template('confirmation.html')
        else:
            return render_template('failure.html')
    return app

if __name__ == '__main__':
    app = create_app()
    app.run(debug=True)

EDIT: I am thinking about just manually typing it in <script> blocks. This was just me trying to save space/time by having it in one .js file because this function is used in two places.

8
  • I think your src attribute could be pointing to the wrong location. ../script.js means the JS file is one folder above. If they're in the same folder use ./script.js if not then I can try to help further. Commented May 5, 2021 at 20:52
  • Please provide errors as text, not as pictures of text. Commented May 5, 2021 at 21:05
  • @HereticMonkey sorry, done. Commented May 5, 2021 at 21:07
  • I think the more interesting one is the GET at the very top: It's not finding script.js at the location you've specified. Commented May 5, 2021 at 21:08
  • We'll need to see your app.py file I think, because the same configuration opened as a simple html file in the browser works fine. Commented May 5, 2021 at 21:09

1 Answer 1

2

Create a directory named static at the same level as templates and put your script file in it. You'll be able to load it like so:

<script type="text/javascript" src="/static/script.js"></script>

Note that this is also valid for other files such as images or css files.

NOTE: The current position of your <script> import is not correct. Either put it inside your <head> or inside <body>. Even tho it will load the script file on most modern browsers, this is not a valid HTML syntax and will get you errors with the W3C validator.

Sign up to request clarification or add additional context in comments.

13 Comments

thanks, I moved it into <head> but it still isn't firing. I tried <body> too
@BluePilot Just tried it in the SO snippet editor and it works fine, may be an issue with your script path.
the source is '../' which means up one directory. is that the correct place for the script?
@BluePilot Yeah you're right, it's most likely an issue in your python code that sets up the server, read my comment on your post.
Never did Flask but it looked like an issue you find on other HTTP server libraries, so I looked at the documentation. A pleasure to help you @BluePilot. Good luck with your project!
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.