单选按钮提交后取值在textarea短暂显示后快速消失问题咨询

异常根因 #

• 你使用了type="submit"属性的按钮，点击后会触发表单的默认提交行为，导致页面直接刷新。你刚写入文本域的内容会随着页面重载回到初始状态，所以会出现值闪一下就消失的现象。
• 代码还存在隐藏逻辑错误：循环结束后theOptionPicked变量固定指向最后一个单选框，如果你选中的不是最后一个选项，最终输出的结果也会出错，应该使用你提前声明用来存储选中值的nameOption变量。

修复步骤 #

1. 阻止表单默认提交行为，二选一即可：
   • 方案1：把按钮的type属性从submit修改为普通按钮button，代码为<input style="width: 100%" type="button" value="clickme" id="clickMePlease">
   • 方案2：在点击事件的回调中接收事件参数，调用e.preventDefault()方法阻止默认提交行为
2. 修正文本域赋值逻辑，替换错误的取值变量

修复后完整可用代码 #

JS逻辑 #

document.getElementById("clickMePlease").onclick=function(e) {
    // 若你选择改按钮type为button，可删除下一行代码
    e.preventDefault();
    var theOptionPicked;
    var i;
    var nameOption;

    for (i = 0; i <= 3; i++) {
        theOptionPicked = document.myForm.nameQuestion[i];
        if (theOptionPicked.checked == true) {
            nameOption = theOptionPicked.value;
        }
    }
    document.myForm.txtOutput.value = "You have picked " + nameOption; 
}

HTML修改部分（仅按钮部分，其余代码不变） #

<input style="width: 100%" type="button" value="clickme" id="clickMePlease">

内容的提问来源于stack exchange，提问作者sb2021