js中的函数表达式自调用方式在onclick事件中无法调用
这是一道猜数题,范围在1~100之间
<input type="text">
<button>你来猜猜看</button><button>来继续啊</button>
<ul>
</ul>
<p>剩余次数:<span>10</span></p>
<script>
var btn = document.querySelector('button');
var input = document.querySelector('input');
var span = document.querySelector('span');
var ul = document.querySelector('ul');
var bu = document.getElementsByTagName('button')[1];
var count = 10;
var ji = function() {
return sui = Math.floor(Math.random() * 100 + 1);
};
ji()
btn.onclick = function() {
if (input.value < 1 || input.value > 100 || !Number(input.value)) {
return alert('请输入1~100以内的数值!')
} else {
if (input.value > sui) {
ul.innerHTML += '<li>' + input.value + '大了!</li>'
} else if (input.value < sui) {
ul.innerHTML += '<li>' + input.value + '小了!</li>'
} else {
ul.innerHTML += '<li>耶!' + input.value + '恭喜你答对了!</li>'
btn.disabled = 'true';
}
}
count--;
span.innerHTML = count;
if (btn.disabled) {
bu.style.display = 'inline';
bu.innerHTML = '你过来啊!!'
return;
}
if (count == 0) {
ul.innerHTML += '<li>游戏结束,这个数是' + sui + ',再接再厉。</li>'
btn.disabled = 'true'
if (btn.disabled) {
bu.style.display = 'inline';
}
}
}
bu.onclick = function() {
btn.disabled = false;
count = 10;
span.innerHTML = count;
ji();
bu.style.display = 'none'
}
</script>
当考虑到,单击第二个button,重新生成一个随机数,就需要再次调用,问题就出现了。
var ji = function() {
return sui = Math.floor(Math.random() * 100 + 1);
}();//如果此处是自调用的函数表达式,那么在这里其他函数中就无法找到生成随机数这个函数。只要修改成不自执行就可以了。