Changing background image depending on variable
Question
I am really unfamiliar with the javascript and I have this little task to handle. The main idea of this task to read input from Flask and depending on that input change the numbers on the website and background. The numbers and values change without a problem, but I can't seem to figure out how to change the background.
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.bggif1 {
background-image: url(Alert.gif);
}
.bggif2 {
background-image: url(Driving.gif);
}
.bggif3 {
background-image: url(Pulling.gif);
}
<table>
<thead><tr><th>Current action</th></tr></thead>
<tbody><tr><td>{{ vaction }}</td></tr></tbody>
</table>
<script>
if vaction === "Driving"
bggif2
if vaction === "Sounding The Alarm"
bggif1
if vaction === "Pulling"
bggif3
</script>
</body>
</html>
This is an example code, I don't need finished code I would just appreciate any tips or advice because I am stuck on the background changing according to the {{ vaction }} variable.
Python part of the code:
print('Are the eyes Open or Closed?: ')
estate1 = input()
print('Does the Driver look to the Front or to the Side?(Front or Side): ')
hstate1 = input()
print('Is The body facing Front or to the Side? (Front or Side): ')
bstate1 = input()
print('Is the car functioning properly? (Working or NotWorking): ')
vstate1 = input()
vaction1 = 'Driving'
# Outcomes of the answers
if estate1 == 'Closed':
elevel1 = 2
else:
elevel1 = 1
if hstate1 == 'Side':
hlevel1 = 2
else:
hlevel1 = 1
if bstate1 == 'Side':
blevel1 = 2
else:
blevel1 = 1
if vstate1 == 'NotWorking':
vlevel1 = 2
else:
vlevel1 = 1
# Vehicle actions according to the answers
if elevel1 == 2 or hlevel1 == 2 or blevel1 == 2:
vaction1 = 'Sounding The Alarm'
if elevel1 == 1 and hlevel1 == 1 and blevel1 == 1 and vlevel1 == 1:
vaction1 = 'Driving'
if vlevel1 == 2:
vaction1 = 'Pulling over'
# Inputs are being over writen as the website page variables
@app.route("/")
def home():
return render_template("Index.html", estate=estate1, hstate=hstate1,
bstate=bstate1, vstate=vstate1, vaction=vaction1, elevel=elevel1,
hlevel=hlevel1, blevel=blevel1, vlevel=vlevel1)
3 answers
solution1
1 ACCPTED 2020-04-14 11:19:40
You are getting the vaction value from the server (Flask server), and you are using Jinja templates, so you need to change your script to be
var vaction = "{{vaction}}";
if(vaction === "Driving")
// do something
else if(vaction === "Sounding The Alarm")
//do something
else if(vaction === "Pulling")
// do something
instead of
if vaction === "Driving"
bggif2
if vaction === "Sounding The Alarm"
bggif1
if vaction === "Pulling"
bggif3
and vaction isn't even defined, you need to use {{}} for template variable
solution2
0 2020-04-14 11:13:38
Try this
const bg = { "Driving": "bggif2", "Sounding The Alarm": "bggif1", "Pulling": "bggif3" } const vaction = "Sounding The Alarm"; // "{{vaction}}" document.querySelector("body").classList.add(bg[vaction]);
.bggif1 { background-image: url(http://www.pngall.com/wp-content/uploads/2017/05/Alert-Download-PNG.png); }.bggif2 { background-image: url(Driving.gif); }.bggif3 { background-image: url(Pulling.gif); }
<table> <thead> <tr> <th>Current action</th> </tr> </thead> <tbody> <tr> <td>Sounding The Alarm</td> </tr> </tbody> </table>
solution3
-1 2020-04-14 11:12:16
A function like this will change the background of an element with id = bggif
const changeImage = () => {
if (vaction === "Driving") {
document.querySelector("#bggif").style.backgroundImage = "url('Driving.gif')"
} else if (vaction === "Sounding The Alarm") {
document.querySelector("#bggif").style.backgroundImage = "url('Alert.gif')"
} else {
document.querySelector("#bggif").style.backgroundImage = "url('Pulling.gif')"
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.