提交单选按钮选项时无法为用户创建警告消息 - Javascript/HTML

Question

我是 Javascript 的新手。我有一个 chrome 扩展，其中有 2 个单选按钮供用户选择（选项称为 Facebook 或 Instagram）。当他们选择一个并按 'save' 时，我希望弹出一条警告消息，只是让用户知道它已保存。我已经尝试了一堆我在 Stack Overflow 上看到的不同的东西，但其中 none 已经奏效了，所以我不确定我是否只是不明白把代码放在哪里？

如何在单击保存按钮时创建一个简单的提醒？例如，我试过使用 onsubmit 事件，但什么也没发生。该代码已经完成了它应该做的事情——Javascript 文件正确地阻止了两个网站之一，具体取决于单击的是哪个单选按钮。所以代码都设置好了。我似乎无法弄清楚如何生成警报。

HTML:

<!DOCTYPE html>
<html>
<head><title>User Options</title></head>
<body>
Which website should I block?<br><br>

<label><input type="radio" name="blockingMethod" id="close_tab" 
value="close_tab" checked> Facebook <br></label>
<label><input type="radio" name="blockingMethod" id="closetab" 
value="closetab" checked> Instagram <br></label>
<br><br>

<input type="submit" id="save" value="save">

<script src="background.js"></script> 
</body>

JAVASCRIPT 文件：

let closingMethodRadios = document.getElementsByName('blockingMethod');
let saveButton = document.getElementById('save');

document.addEventListener('DOMContentLoaded', function() {

if(saveButton) {
    saveButton.addEventListener('click', function() {


    if(closingMethodRadios[0].checked){
        chrome.storage.sync.set({'blockingMethod': 'close_tab'}),
        
        
    chrome.webRequest.onBeforeRequest.addListener(
        () => ({cancel: true}),
        {
        urls: ['*://*.facebook.com/*'],
        types: ['main_frame'],
        },
        ['blocking']);
        }


        if (closingMethodRadios[1].checked) {
            chrome.storage.sync.set({'blockingMethod': "closetab"}),
        
            chrome.webRequest.onBeforeRequest.addListener(
            () => ({cancel: true}),
            {
            urls: ['*://*.instagram.com/*'],
            types: ['main_frame'],
            },
            ['blocking']);
            }

    });
    
    }            
});

Answer 1

你只需要使用 javascript 中的警报功能，你已经有了 onclick 方法，只需在其中添加一个警报，如下所示：

let closingMethodRadios = document.getElementsByName('blockingMethod');
let saveButton = document.getElementById('save');



document.addEventListener('DOMContentLoaded', function() {

if(saveButton) {
    saveButton.addEventListener('click', function() {
        
    alert("Option Saved")

    if(closingMethodRadios[0].checked){
        chrome.storage.sync.set({'blockingMethod': 'close_tab'}),
        
        
    chrome.webRequest.onBeforeRequest.addListener(
        () => ({cancel: true}),
        {
        urls: ['*://*.facebook.com/*'],
        types: ['main_frame'],
        },
        ['blocking']);
        }


        if (closingMethodRadios[1].checked) {
            chrome.storage.sync.set({'blockingMethod': "closetab"}),
        
            chrome.webRequest.onBeforeRequest.addListener(
            () => ({cancel: true}),
            {
            urls: ['*://*.instagram.com/*'],
            types: ['main_frame'],
            },
            ['blocking']);
            }

    });
    
    }            
});

<!DOCTYPE html>
<html>
<head><title>User Options</title></head>
<body>
Which website should I block?<br><br>

<label><input type="radio" name="blockingMethod" id="close_tab" 
value="close_tab" checked> Facebook <br></label>
<label><input type="radio" name="blockingMethod" id="closetab" 
value="closetab" checked> Instagram <br></label>
<br><br>

<input type="submit" id="save" value="save">

<script src="background.js"></script> 
</body>

jsFiddle： https://jsfiddle.net/ryzuc1n7/

提交单选按钮选项时无法为用户创建警告消息 - Javascript/HTML

Cannot Create Alert Message for User When Radio Button Option is Submitted - Javascript/HTML

javascript

html

submit

form-submit

onsubmit