电话号码和邮箱 编辑和取消 问题

直接点击取消时，电话号码和邮箱没有变化。点击编辑后，变为输入框，如果不想编辑了，再点击取消，内容恢复原样。

//编辑
function edit(){
     //phone,email 变量声明时没有使用var,是全局变量，因为下面的cancel()函数要用到
     phone = $("#phone").text();
     email = $("#email").text();
    $("#phone").html("<input type='text' name='newPhone' id='newPhone' class='form-control' placeholder='请输入电话号码'>");
     $("#email").html("<input type='text' name='newEmail' id='newEmail' class='form-control' placeholder='请输入邮箱'>");               
}
//取消
function cancel(){
   //如果直接点击取消，则内容不变，typeof phone=="object"
   //如果点击编辑后在再点击取消，typeof phone=="string"  , 既 typeof phone != "object"
    var cancelPhone = $("#phone").text();
    var cancelEmail = $("#email").text();
    if(typeof phone =="object"){
      $("#phone").html(cancelPhone);
      $("#email").html(cancelEmail);
    }else{
      $("#phone").html(phone);
      $("#email").html(email);
    }

}

<tr>
  <td>电话</td>
  <td><div id="phone">${user.phone }</div></td>     
</tr>
<tr>
  <td>邮箱</td>
  <td><div id="email">${user.email }</div></td>     
</tr>

<tr>
  <td style="text-align: center;"><button type="button" onclick="cancel()" class="layui-btn layui-btn-normal"><font size="2">取消</font></button></td>
</tr>

 

<li class="li"> 
   <button onclick="edit()" class="layui-btn layui-btn-normal"><font size="2">编辑</font></button>
</li>

 

1.直接点击取消，内容没有变化

2.点击编辑，电话和邮箱变为输入框。

3.忽然不想编辑了，点击取消后，内容恢复原样。