Question

以下代码是一个简单的表单，它接受来自用户的数字，并显示在表单中输入的半径圆。一切都运行正常，只要我点击提交按钮后圈子就会消失。如何解决这个问题？我点击提交按钮后，我希望圈子在那里很久。

<title>Dynamic Vector Circle</title>

<script type="text/javascript">

    var svgNS = "http://www.w3.org/2000/svg";  

    function createCircle()
    {
        var myCircle = document.createElementNS(svgNS,"circle"); //to create                                          a circle, for rectangle use rectangle
        var radius= document.getElementById("rad").value;
        myCircle.setAttributeNS(null,"id","mycircle");
        myCircle.setAttributeNS(null,"cx",100);
        myCircle.setAttributeNS(null,"cy",100);
        myCircle.setAttributeNS(null,"r",radius);
        myCircle.setAttributeNS(null,"fill","black");
        myCircle.setAttributeNS(null,"stroke","none");

        document.getElementById("mySVG").appendChild(myCircle).innerHTML;
    }                 

</script>

<form>   
    <input type="text" id="rad" placeholder="Enter radius">
    <button onClick="createCircle();">Submit</button>

    <svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

</form>

Answer 1

问题是按钮单击时表单的默认操作是提交。为避免提交，您可以从绑定到按钮的函数return false。因此，如果您将createCircle的结尾更改为：

  ...
  return false;
}

它会按您的需要工作。这是整个功能：

function createCircle()
{
    var myCircle = document.createElementNS(svgNS,"circle"); //to create                                          a circle, for rectangle use rectangle
    var radius= document.getElementById("rad").value;
    myCircle.setAttributeNS(null,"id","mycircle");
    myCircle.setAttributeNS(null,"cx",100);
    myCircle.setAttributeNS(null,"cy",100);
    myCircle.setAttributeNS(null,"r",radius);
    myCircle.setAttributeNS(null,"fill","black");
    myCircle.setAttributeNS(null,"stroke","none");

    document.getElementById("mySVG").appendChild(myCircle).innerHTML;

    return false;
}

JSFiddle：http://jsfiddle.net/252yLdqx/2/

或者您可以使用button将input更改为type="button"，而<input type="button" id="create" value="Create"/>不具有提交表单的默认行为：

button

JSFiddle：http://jsfiddle.net/252yLdqx/3/

或者您可以将type="button"更改为type="submit"以覆盖默认<button type="button" onClick="createCircle();">Submit</button>，如下所示：

form

或者你不能将输入包含在data[col_name] = a_col.apply(lambda x: x if isinstance(x, datetime.datetime) and not isinstance(x, pd.tslib.NaTType) else epoch)标签中并做任何你想做的事情！

使用SVG在html页面中显示动态圆

1 个答案: