gpt4 book ai didi

javascript - 事件监听器清除console.log

转载 作者:行者123 更新时间:2023-11-28 17:35:33 24 4
gpt4 key购买 nike

所以,我正在尝试创建 chrome 扩展。

发生了一些奇怪的事情,单击我的输入提交后,它会清除我的控制台日志(更像是刷新我的索引页面)。

这是我的 app.js 页面

var color = document.getElementById('fontColor');
var colors;


function addListenerMulti(element, eventNames, listener){
var events = eventNames.split(' ');
for (var i=0; i<events.length; i++) {
element.addEventListener(events[i], listener);
}
}

addListenerMulti(color, 'change paste color', function(){
colors = document.getElementById("fontColor").value;
console.log(colors);
});

document.getElementById('btn-change').addEventListener("click", function() {
chrome.tabs.query({active: true, currentWindow:true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {todo: "changeColor", clickedColor: colors})
});

和 Index.html 文件。

<html>
<head>
<link rel="stylesheet" href="css/style.css">
<title> Tinder Auto Swipe </title>
</head>

<body>
<h2> Select the color </h2>
<form>
<input type="text" class="jscolor" id="fontColor" value="#AB2567">
<input type="submit" value="Change" id="btn-change">
</form>

<!-- Scripts -->
<script src = "scripts/jscolor.min.js">
</script>
<script src="app.js">
</script>
<script src="scripts/jquery-3.3.1.min.js">
</script>

</body>
</html>

有人可以帮我解决这个问题吗?另外,如果您需要更多详细信息,请告诉我。

最佳答案

它正在清除控制台,因为当您单击“更改”按钮时,它会提交表单并将其导航到相同的地址,因为它的输入类型是提交(type="submit")。

要阻止表单提交,请将输入类型更改为按钮:

<input type="button" value="Change" id="btn-change">

或者不要使用以下方式让表单提交:

<form onsubmit="return false;"> 

或更安全地:

 <form onsubmit="event.preventDefault(); return false;">

或者通过配置控制台

如果您希望提交表单,您可以通过“选中”保留日志选项来防止 chrome 控制台在发生导航时自行清除,如下所示: enter image description here

关于javascript - 事件监听器清除console.log,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49220895/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com