为什么我的javascript计算器不能与base.html一起使用?

时间:2017-10-24 01:24:19

标签: javascript html django

前一段时间我制作了一个javascript计算器,现在我又在另一个项目中重复使用它。问题是,它甚至不再显示在页面上。这是calc.html文件的代码。

{% extends 'base.html' %}

{% block body %}

<div class="text-center">
    <h1>Calculator</h1>
</div>
<div id="JSCalc">
    <form name="calculator">
        <input type="text" name="answer"/>
        <br />
        <input type="button" value=" 7" onclick="calculator.answer.value += '7'"/>
        <input type="button" value=" 8" onclick="calculator.answer.value += '8'"/>
        <input type="button" value=" 9" onclick="calculator.answer.value += '9'"/>
        <input type="button" value=" *" onclick="calculator.answer.value += '*'"/>
        <br />
        <input type="button" value=" 4" onclick="calculator.answer.value += '4'"/>
        <input type="button" value=" 5" onclick="calculator.answer.value += '5'"/>
        <input type="button" value=" 6" onclick="calculator.answer.value += '6'"/>
        <input type="button" value=" -" onclick="calculator.answer.value += '-'"/>
        <br />
        <input type="button" value=" 1" onclick="calculator.answer.value += '1'"/>
        <input type="button" value=" 2" onclick="calculator.answer.value += '2'"/>
        <input type="button" value=" 3" onclick="calculator.answer.value += '3'"/>
        <input type="button" value=" +" onclick="calculator.answer.value += '+'"/>
        <br />
        <input type="button" value=" 0" onclick="calculator.answer.value += '0'"/>
        <input type="button" value=" C" onclick="calculator.answer.value = ''"/>
        <input type="button" value=" =" onclick="calculator.answer.value = eval(calculator.answer.value)"/>
        <input type="button" value=" /" onclick="calculator.answer.value += '/'"/>
        <br />
    </form>
</div>

{% endblock %}

这是它延伸的base.html文件。请注意,这不是由我写的,我只是想让计算器与它一起工作,而我却没有看到它是什么阻止了它。

<!DOCTYPE html>
{% load static %}
<html class="no-js" lang="en" dir="ltr">
    <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>
            {% if indexPage %}
                Sales Tracker
            {% else %}
                {% block title %}{% endblock %} &sdot; Sales Tracker
            {% endif %}
        </title>
        <link rel='stylesheet' href='{% static "css/foundation.min.css" %}'/>
        <link rel='stylesheet' href='{% static "css/app.css" %}'/>
    </head>
    <body>
        <!-- Top Nav Bar -->
        <div class="top-bar">
            <div class="top-bar-left">
                <input type="submit" class="blue" value="Calculator" onclick="window.open('http://localhost:8000/calc','_blank','height=425,width=425')" />
                <a href="/">Sales Tracker</a>
                </div>
            <div class="top-bar-right">
                {% if user.is_authenticated %}
                    <a href="/account/">Account</a>
                    <a href="/logout/">Logout</a>
                {% else %}
                    <a href="/register/">Register</a>
                    <a href="/login/">Login</a>
                {% endif %}
            </div>
        </div>
        <!-- [END] Top Nav Bar -->

        {% block default_content %}{% endblock %}
        {% block content %}{% endblock %}
        <script src='{% static "js/vendor/jquery.js" %}'></script>
        <script src='{% static "js/vendor/what-input.js" %}'></script>
        <script src='{% static "js/vendor/foundation.min.js" %}'></script>
        <script src='{% static "js/app.js" %}'></script>
        {% block scripts %}{% endblock %}
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

你说你需要访问:

  

http://localhost:8000/calc.html(calc.html)

那你还没定义那个对吗?您正尝试访问:

  

http://localhost:8000/calc(计算)

您的代码:

<input type="submit" class="blue" value="Calculator" onclick="window.open('http://localhost:8000/calc','_blank','height=425,width=425')" />

试试这个:

<input type="submit" class="blue" value="Calculator" onclick="window.open('http://localhost:8000/calc.html','_blank','height=425,width=425')" />