Javascript 转换不适用于使用CSS和JS提交的输入类型

我已经创建了两个按钮

开始吧和
单击我
。一个是
输入类型提交
，第二个是
锚定标记
。
当用户单击锚定标记时，
锚定标记的转换工作，但如果单击，
输入类型提交
则不工作

检查下面的脚本。还有其他简单的方法可以解决这个问题吗


const isMobile=window.navigator.userAgent.match（/Mobile/）和&window.navigator.userAgent.match（/Mobile/）[0]=“Mobile”；
const event=isMobile？“touchstart”：“单击”；
const button=document.querySelectorAll（'*[data animation=“ripple”]'），
容器=document.querySelector（“.container”）；
对于（变量i=0；i

：根目录{
/*如果你想改变颜色
*涟漪会改变此值
*/
--颜色波纹：rgba（255，255，255，0.8）；
}
.集装箱{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
高度：50px；
宽度：200px；
保证金：自动；
}
*[数据动画=“涟漪”]{
位置：相对位置；
/*相对位置是必需的*/
身高：100%；
宽度：100%；
显示：块；
大纲：无；
填充：20px；
颜色：#fff；
文本转换：大写；
背景：线性梯度（135度，#e570e7 0%，#79f1fc 100%）；
框大小：边框框；
文本对齐：居中；
线高：14px；
边界：无；
字号：200；
字母间距：1px；
文字装饰：无；
盒影：0 5px 3px rgba（0,0,0,0.3）；
光标：指针；
/*边界半径：50px*/
-webkit点击突出显示颜色：透明；
}
*[数据动画=“涟漪”]：焦点{
大纲：无；
}
*[数据动画=“涟漪”]：：选择{
背景：透明；
指针事件：无；
}

点击我
您可以使用
按钮
标记进行下面的尝试

<button type="submit" name="searchbtrn" data-animation="ripple">Let's Go!</button>

我们走吧！
如评论中所述，它不起作用的原因是您试图将一个元素附加到
输入
，但这是无法完成的

一种解决方案是用
按钮
替换
输入
，但您也表示不想这样做

我能想到的唯一其他解决方案是用
span
包装
输入
，并将涟漪附加到此span。效果完成后，打开
输入
。我已经在下面的例子中这样做了


const isMobile=window.navigator.userAgent.match（/Mobile/）和&window.navigator.userAgent.match（/Mobile/）[0]=“Mobile”；
const event=isMobile？“touchstart”：“单击”；
const button=document.querySelectorAll（'*[data animation=“ripple”]'），
容器=document.querySelector（“.container”）；
对于（变量i=0；i

：根目录{
/*如果你想改变颜色
*涟漪会改变此值
*/
--颜色波纹：rgba（255，255，255，0.8）；
}
.集装箱{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；