HTML / Javascript -通过混合文本和变量值来评估元素id

3phpmpom  于 2023-03-21  发布在  Java
关注(0)|答案(3)|浏览(121)

我有一些这样的HTML

<div id='div1'>some content</div>
<div id='div2'>some other content/div>
<div id='div3'>now some even different content</div>

<button onclick='CallThis(1);'>Alert 1</button>
<button onclick='CallThis(2);'>Alert 2</button>
<button onclick='CallThis(3);'>Alert 3</button>

<script>
    function CallThis(SomeVar)
    {
       alert(document.getElementById('div' + SomeVar).innerHTML);
    }
</script>

我想使用简单的javascript。我如何才能实现这一点?
谢谢你的帮助。

jobtbby3

jobtbby31#

不太确定你想完成什么,但是如果你想显示一些随点击按钮而变化的警报,你可以使用如下的if语句:

<script>
function CallThis(SomeVar){
    text = '';
    if (SomeVar == '1'){
        text = 'some content';
    } else if(SomeVar == '2'){
        text = 'some other content';
    } else {
        text = 'now some even different content';
    }
    alert(text);
}
</script>

它真的只是一个基本的JavaScript,也许可以尝试先学习基础,这里有一个学习JavaScript基础的页面:JavaScript Tutorial

drkbr07n

drkbr07n2#

我唯一注意到的是第二行的一个错字,如果我们解决了这个问题,那么它就能工作了。

function CallThis(SomeVar) {
   alert(document.getElementById('div' + SomeVar).innerHTML);
}
<div id='div1'>some content</div>
<div id='div2'>some other content</div>
<div id='div3'>now some even different content</div>

<button onclick='CallThis(1);'>Alert 1</button>
<button onclick='CallThis(2);'>Alert 2</button>
<button onclick='CallThis(3);'>Alert 3</button>
gzjq41n4

gzjq41n43#

您需要学习DOM遍历,或者高效地使用 querySelectorAll(“div”)

function CallThis(SomeVar){
        alert(document.querySelectorAll('div')[SomeVar-1].innerHTML);
    }

更直观的编码方式可以帮助调试

<button onclick='CallThis("div1");'>Alert 1</button>
<button onclick='CallThis("div2");'>Alert 2</button>
<button onclick='CallThis("div3");'>Alert 3</button>
function CallThis(div){
        alert(document.getElementById(div).innerHTML);
    }

相关问题