Question

我在设计的计算器中有一个烦人的错误。出于某种原因，Chrome会在单击按钮时显示“意外的标记}”。这毫无意义。我相信通过暂时删除JavaScript和CSS，以及onclick事件（以确保没有未定义的JavaScript函数），我已将问题缩小到HTMl，这是完美的。此外，+，*，=和 - 按钮工作正常，因此它必须是onclick事件。有什么问题？

P.S：计算器显然没有完全正常运行。这只是一个开始。

<head>
    <style>
      button{
        background-color: #4D4447;
        border: 2px solid #191842;
        color: #BABACC;
      }
      button:hover{
        background-color: #6F6DC2;
        color: #FDFCFF;
      }
    </style>    
    <script>
    var num = ""
      function tonumber (val){
          num=num+val
        document.getElementById("answer").innerHTML=num
      }
    </script>
</head>
<body>
      <table id="calc">
      <caption id="answer">0</caption>
      <tr>
      <td><button onclick="tonumber("1")">1</button></td>
      <td><button onclick="tonumber("2")">2</button></td>
      <td><button onclick="tonumber("3")">3</button></td>
      </tr>
      This goes on with 4,5,6,7,8 and 9. Same code, just with different numbers.
      <tr>
      <td><button onclick="tonumber("0")">0</button></td>
       <td><button>+</button></td>
       <td><button>-</button></td>
       </tr>
       <tr>
        <td><button>*</button></td>
       <td><button>/</button></td>
       <td><button>=</button></td>
       </tr>
       </table>

</body>

Answer 1

问题是您的引号未正确包装以完成将参数注册到onclick的参数的表达式。因此，你得到了JS错误。

试试这个：注意tonumber函数的参数之前和之后的单引号。

   <td><button onclick="tonumber('1')">1</button></td>
  <td><button onclick="tonumber('2')">2</button></td>
  <td><button onclick="tonumber('3')">3</button></td>

Demo

<button onclick="tonumber("1")">1</button>
                           ^---------------------------------

Answer 2

Ext.define('MyCalculaterApp.view.Main', {
    extend: 'Ext.Panel',
    xtype: 'main',
    requires: [
    'Ext.TitleBar',
    'Ext.field.Text'
    ],
    config: {
        right: '40%',
        left: '40%',
        top: '20%',
        bottom: '20%',
        margin:'10px',
        padding:'10px',
        defaults: {
            flex:'1'           
        },   
        items: [
        {
            xtype:'fieldset',
            title:'...Calculater...',
            flex:'1',
            instructions:'screen touch calculater'
        },
        {            
            xtype: 'textfield',
            id: 'screen',    
            name: 'screen',
            style:'font-size:20px;',
            height: '15%'
        },
        {
            layout: 'hbox',
            defaults:{
                flex:'1',
                margin:'5px'
            },
            items: [
            {
                xtype: 'button',
                text: '1',
                name: 'one'
            },
            {
                xtype: 'button',
                text: '2',
                name: 'two'
            },
            {
                xtype: 'button',
                text: '3',
                name: 'three'
            }
            ]
        },
        {
            layout: 'hbox',
            defaults:{
                flex:'1',
                margin:'5px'
            },
            items: [
            {
                xtype: 'button',
                text: '4',
                name: 'four'
            },
            {
                xtype: 'button',
                text: '5',
                name: 'five'
            },
            {
                xtype: 'button',
                text: '6',
                name: 'six'
            }
            ]
        },
        {
            layout: 'hbox',
            defaults:{
                flex:'1'  ,
                margin:'5px'
            },
            items: [
            {
                xtype: 'button',
                text: '7',
                name: 'seven'
            },
            {
                xtype: 'button',
                text: '8',
                name: 'eight'
            },
            {
                xtype: 'button',
                text: '9',
                name: 'nine'
            }
            ]
        },
        {
            layout: 'hbox',
            defaults:{
                flex:'1'  ,
                margin:'5px'
            },
            items: [
            {
                xtype: 'button',
                text: '0',
                name: 'zero'
            },
            {
                xtype: 'button',
                text: '+',
                name: 'add'
            },
            {
                xtype: 'button',
                text: '-',
                name: 'sub'
            }
            ]
        },
        {
            layout: 'hbox', 
            defaults:{
                flex:'1'  ,
                margin:'5px'
            },
            items: [
            {
                xtype: 'button',
                text: '*',
                name: 'mul'
            },
            {
                xtype: 'button',
                text: '/',
                name: 'div'
            },
            {
                xtype: 'button',
                text: '=',
                name: 'equal'
            },
            ]
        }
        ]
    }
});

计算器不工作

2 个答案:

Demo