使用javascript更改select上的svg tekst项

我制作了一个小型天气网站，在这个网站上有一个页面，你可以看到荷兰各地的气温。我还创建了一个选择项，您可以在其中选择“今天”、“明天”或“后天”

当有人选择不同的日子时，我想改变温度。 我在js中做了一个if-else语句来改变温度，但由于某些原因，它不起作用。我找了很多，但找不出原因

页面图片：

顺便说一下，一切都是荷兰语

我在HTML中选择要更改的文本项：

基斯德达格：
范达格
摩根
过度催眠

5度
7度
5度
6度
4度

以及更改文本项温度的js代码：

函数kaartGrades（）{
const x=document.getElementById（“dagen”）.value；
警报（x）；
如果（x==“vandaag”）{
document.getElementById（“s1”）.innerHTML=“”；
document.getElementById（“s2”）.innerHTML=“”；
document.getElementById（“s3”）.innerHTML=“”；
document.getElementById（“s4”）.innerHTML=“”；
document.getElementById（“s5”）.innerHTML=“”；
}如果（x==“摩根”），则为else{
document.getElementById（“s1”）.innerHTML=“8°”；
document.getElementById（“s2”）.innerHTML=“9°”；
document.getElementById（“s3”）.innerHTML=“8°”；
document.getElementById（“s4”）.innerHTML=“9°”；
document.getElementById（“s5”）.innerHTML=“10°”；
}否则，如果（x==“过度发霉”）{
document.getElementById（“s1”）.innerHTML=“10°”；
document.getElementById（“s2”）.innerHTML=“13°”；
document.getElementById（“s3”）.innerHTML=“12°”；
document.getElementById（“s4”）.innerHTML=“12°”；
document.getElementById（“s5”）.innerHTML=“15°”；
}
}

您的脚本工作正常，只需使用

css

属性即可，因为您的

SVG没有覆盖顶部图像的整个高度，所以请在SVG上定义
位置：绝对
，类似下面的代码片段


函数kaartGrades（）{
const x=document.getElementById（“dagen”）.value；
警报（x）；
如果（x==“vandaag”）{
document.getElementById（“s1”）.innerHTML=“”；
document.getElementById（“s2”）.innerHTML=“”；
document.getElementById（“s3”）.innerHTML=“”；
document.getElementById（“s4”）.innerHTML=“”；
document.getElementById（“s5”）.innerHTML=“”；
}如果（x==“摩根”），则为else{
document.getElementById（“s1”）.innerHTML=“8°”；
document.getElementById（“s2”）.innerHTML=“9°”；
document.getElementById（“s3”）.innerHTML=“8°”；
document.getElementById（“s4”）.innerHTML=“9°”；
document.getElementById（“s5”）.innerHTML=“10°”；
}否则，如果（x==“过度发霉”）{
document.getElementById（“s1”）.innerHTML=“10°”；
document.getElementById（“s2”）.innerHTML=“13°”；
document.getElementById（“s3”）.innerHTML=“12°”；
document.getElementById（“s4”）.innerHTML=“12°”；
document.getElementById（“s5”）.innerHTML=“15°”；
}
}
.weer\u-kaart{
位置：相对位置；
高度：500px；
显示：内联块；
}
weer_kaart先生{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：1；
}

基斯德达格：
范达格
摩根
过度催眠

5度
7度
5度
6度
4度
对我来说似乎很好：@Terry's fiddle^对我也很好。@Ronny您的脚本很好，只需要使用css，因为您的SVG没有覆盖顶部图像的整个高度。