javascript - 点击button添加标签后,添加的标签闪一下没有了?
本文介绍了javascript - 点击button添加标签后,添加的标签闪一下没有了?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
点击按钮添加标签如下:
但是点击添加后标签闪了下又消失了(gif录不进去,但确实添加进去有没有了),与此同时URL后面多了个问号,可以点击后退按钮了....
这是为什么呢?与什么有关?
html
<form>
<textarea id="hobby_input" rows="8" cols="40" placeholder="输入您的兴趣爱好"></textarea>
<button id="button">确认兴趣爱好</button>
<div class="hobby" id="hobby_list"></div>
</form>
javascript
var $ = function(x){
return document.querySelector(x);
};
var $a = function(id){
return document.getElementById(id);
};
function addEvent(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if (element.attachEvent) {
element.attachEvent('on'+type,handler);
}else{
element['on'+type] = handler;
}
}
var arrHobby=[];
function displayHobby(){
var hobby = $('textarea').value.trim();
arrHobby.push(hobby);
renderHobby();
}
function clickKeyup(){
addEvent($('button'),'click',displayHobby);
}
function renderHobby(){
var hobbyList='';
for(var item in arrHobby){
hobbyList += '<span class="numClass">' + arrHobby[item] +'</span>';
}
$a('hobby_list').innerHTML = hobbyList;
}
function init(){
clickKeyup();
renderHobby();
}
init();
解决方案
//修改 displayHobby 函数
function displayHobby(e){
var hobby = $('textarea').value.trim();
arrHobby.push(hobby);
renderHobby();
//add this code
e.preventDefault();
}
这篇关于javascript - 点击button添加标签后,添加的标签闪一下没有了?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文