为什么在检测到网站语言后html文本不发生变化？
为什么在检测到网站语言后html文本不发生变化？
提问于 2022-02-21 22:43:00
我正试图为AB测试创建一个横幅。问题是，我的代码必须识别速度上的语言(英语或法语)，并转换为正确的语言：
我已经创建了以下函数，但它不起作用。
var lang = document.querySelector('html').getAttribute('lang'),
title = '',
subtitle = '',
ctaText = '';
if (lang === 'en-be') {
title = 'Collect points everyday and redeem them for rewards!';
subtitle = 'Choose an activity below to start earning points or if you already have them, redeem now!';
ctaText = "GO TO REWARDS >";
init();
} else if (lang === 'fr-be') {
title = 'Accumulez des points tous les jours et échangez-les contre des récompenses!';
subtitle = 'Choisissez une des activités ci-dessous pour commencer à accumuler des points. Si vous en avez déjà, échangez-les dès maintenant!';
ctaText = "VOIR LES RÉCOMPENSES >";
init();
}
var croContent = `
<div class="cro-abtest">
<div class="cro-banner">
<div>
<div>` + title + `</div>
<div>` + subtitle + `</div>
</div>
<img src="https://admin.jtidrive.ca/cms/media/620ba1d7669ff63d900ae5a6.png">
<div>
<img src="https://admin.jtidrive.ca/cms/media/620ba1da669ff63d900ae5a7.png">
<a href="https://rewards.jtidrive.ca/" onClick="ga('send', 'event', 'cro-banner', 'click', 'cro-rewards');">` + ctaText + `</a>
</div>
</div>
</div>
`;
var croCA = document.querySelector("#root > div > div > div > div > div:nth-child(3)");
croCA.insertAdjacentHTML('beforebegin', croContent);
var croCSS = '<style> .cro-abtest {max-width: 1280px;margin-left: auto;margin-right: auto;} .cro-banner {display:flex;flex-direction:row;justify-content:center;align-items: center;border: 1px solid #707070;margin:25px 0px;font-family:Roboto;padding: 25px;} .cro-banner > div:nth-child(1) > div:nth-child(1) {color: #0EB0A7;font-weight:500;font-size: 1.875rem;} .cro-banner > div:nth-child(1) > div:nth-child(2) {color: #888888;} .cro-abtest > div > img:nth-child(2){width:40rem;;height: 10rem;} .cro-abtest > div > div:nth-child(3) > img {display:none;} .cro-abtest > div > div:nth-child(3) > a {background: #0EB0A7;padding: 5px 10px;border-radius: 1px;color: white;white-space: nowrap;} .cro-abtest > div > div:nth-child(1) {width:25rem;} @media screen and (max-width: 1200px) {.cro-abtest > div > img{width:30rem;;height: 7rem;} .cro-banner > div:nth-child(1) > div:nth-child(1) {font-size: 1.125rem;}} @media screen and (max-width: 800px) {.cro-banner{flex-direction: column;} .cro-abtest > div > div:nth-child(1) {width:100%;} .cro-abtest > div > div:nth-child(3) {display:flex;align-items:center;}.cro-abtest > div > img:nth-child(2) {display:none;} .cro-abtest > div > div:nth-child(3) > img{display: block;width: 176px;height: 82px;}}</style>'
croCA.insertAdjacentHTML('beforebegin', croCSS);当帐户中的用户使用英语时，该函数必须将document.querySelector('html').getAttribute('lang')识别为英语并添加英文文本，但如果帐户中有法语，则应将其替换为法语文本
有人知道我哪里弄错了吗？
回答 1
Stack Overflow用户
发布于 2022-02-23 18:48:58
在不发布HTML的情况下，我创建了一个简单的html，它适用于我：
<html lang="en-be">
<head>
<title>demo</title>
<script>
function banner() {
var lang = document.querySelector('html').getAttribute('lang'),
title = '',
subtitle = '',
ctaText = '';
if (lang === 'en-be') {
title = 'Collect points everyday and redeem them for rewards!';
subtitle = 'Choose an activity below to start earning points or if you already have them, redeem now!';
ctaText = "GO TO REWARDS >";
} else if (lang === 'fr-be') {
title = 'Accumulez des points tous les jours et échangez-les contre des récompenses!';
subtitle = 'Choisissez une des activités ci-dessous pour commencer à accumuler des points. Si vous en avez déjà, échangez-les dès maintenant!';
ctaText = "VOIR LES RÉCOMPENSES >";
}
var croContent = `
<div class="cro-abtest">
<div class="cro-banner">
<div>
<div>` + title + `</div>
<div>` + subtitle + `</div>
</div>
<img src="https://admin.jtidrive.ca/cms/media/620ba1d7669ff63d900ae5a6.png">
<div>
<img src="https://admin.jtidrive.ca/cms/media/620ba1da669ff63d900ae5a7.png">
<a href="https://rewards.jtidrive.ca/" onClick="ga('send', 'event', 'cro-banner', 'click', 'cro-rewards');">` + ctaText + `</a>
</div>
</div>
</div>
`;
var croCA = document.querySelector("p");
croCA.insertAdjacentHTML('beforebegin', croContent);
var croCSS = '<style> .cro-abtest {max-width: 1280px;margin-left: auto;margin-right: auto;} .cro-banner {display:flex;flex-direction:row;justify-content:center;align-items: center;border: 1px solid #707070;margin:25px 0px;font-family:Roboto;padding: 25px;} .cro-banner > div:nth-child(1) > div:nth-child(1) {color: #0EB0A7;font-weight:500;font-size: 1.875rem;} .cro-banner > div:nth-child(1) > div:nth-child(2) {color: #888888;} .cro-abtest > div > img:nth-child(2){width:40rem;;height: 10rem;} .cro-abtest > div > div:nth-child(3) > img {display:none;} .cro-abtest > div > div:nth-child(3) > a {background: #0EB0A7;padding: 5px 10px;border-radius: 1px;color: white;white-space: nowrap;} .cro-abtest > div > div:nth-child(1) {width:25rem;} @media screen and (max-width: 1200px) {.cro-abtest > div > img{width:30rem;;height: 7rem;} .cro-banner > div:nth-child(1) > div:nth-child(1) {font-size: 1.125rem;}} @media screen and (max-width: 800px) {.cro-banner{flex-direction: column;} .cro-abtest > div > div:nth-child(1) {width:100%;} .cro-abtest > div > div:nth-child(3) {display:flex;align-items:center;}.cro-abtest > div > img:nth-child(2) {display:none;} .cro-abtest > div > div:nth-child(3) > img{display: block;width: 176px;height: 82px;}}</style>'
croCA.insertAdjacentHTML('beforebegin', croCSS);
}
</script>
</head>
<body onload="banner();">
<p>placeholder.</p>
</body>
</html>以下分别为英文及法文的横额：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71213884
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号