在加载时运行两个 JavaScript 函数，一个取消另一个

Question

我是javascript的初学者，我正在尝试确保updateStyle和changeColor都可以工作，但是当我在最后添加changeColor((时，它可以工作，但随后updateStyle((不起作用，我怎样才能使它们在加载时都发生？ updateStyle 将所有 H1 标签更改为漫画 sans 和 changeColor 使 H1 中的每个字母都成为不同的随机颜色， 在一个理想的世界里：这两件事都会发生！正如下面的代码所示，H1 中的每个字母都是不同的颜色，但字体保持自动状态。如果我删除changeColor(((在最后(，那么H1总是在漫画sans中。这是针对谷歌扩展的，如果这是相关的。

'use strict'
let fontOverwrite = 'h1 {font-family: Comic Sans MS !important}'
let transformOverwrite = 'h1 {text-transform:uppercase}'
// if we don't have the styleDom, create it
let styleDom = document.getElementById('comic-sans-everything-style')
if (!styleDom) {
styleDom = document.querySelector('h1').appendChild(document.createElement('style'))
styleDom.id = 'comic-sans-everything-style'
styleDom.rel = 'stylesheet'
styleDom.type = 'text/css'
}
const updateStyle = () => {
window.chrome.storage.sync.get(['status', 'uppercase'], (items) => {
if (!window.chrome.runtime.error) {
if (items.status && items.uppercase) {
styleDom.innerText = fontOverwrite + transformOverwrite
} else if (items.status) {
styleDom.innerText = fontOverwrite
} else {
styleDom.innerText = ''
}
}
})
}

// ADDED to make letters rainbow :)
function changeColor() {
var paragraphs = document.getElementsByTagName("h1");
for(var i = 0; i < paragraphs.length; i++)
{
var innerText = paragraphs[i].innerHTML;
var innerTextSplit = innerText.split("");
paragraphs[i].innerText = "";
var isHTMLElement = false;
for(var j = 0; j < innerTextSplit.length; j++) {
if(innerTextSplit[j] == "<")
isHTMLElement = true;
if(!isHTMLElement){
var randomColor = "rgb(" + Math.floor((Math.random() * 255) + 1) + ", " + Math.floor((Math.random() * 255) + 1) + ", " + Math.floor((Math.random() * 255) + 1) + ");"
innerTextSplit[j] = '<span style="color: ' + randomColor + '">' + innerTextSplit[j] + '</span>';
}
if(innerTextSplit[j] == ">")
isHTMLElement = false;
}
innerTextSplit = innerTextSplit.join('');
paragraphs[i].innerHTML += innerTextSplit;
}
}

//THIS is where i'm trying to make the functions happen, when they're both there ONLY changeColor() works

// run once on file load
updateStyle()
changeColor()

Answer 1

首先尝试以这种方式声明您的函数：

function updateStyle(){
window.chrome.storage.sync.get
(['status', 'uppercase'], 
(items) => {
if 
(!window.chrome.runtime.error) 
{
if (items.status && 
items.uppercase) {
styleDom.innerText = 
fontOverwrite + 
transformOverwrite
} else if (items.status) {
styleDom.innerText = 
fontOverwrite
} else {
styleDom.innerText = ''
}
}
})
} 

其次，在函数调用的末尾添加 ";">

更新样式((; 改变颜色;

希望有帮助