Javascript连接多个字符串变量并在span中显示

我有一个制作传单的简单页面。我有数据显示，并坚持采取三个变量，并显示在一个跨度为撕下来他们。这是我到目前为止所拥有的。我尝试了几种不同的方法，试图在div中打印标题、名称和电话。我使用多事件侦听器触发函数，使用getElementsByClassName处理程序将数据放置在span中。任何方向都是值得赞赏的

//JavaScript文档
//填充传单文本区域
//传单标题
var inputBoxTitle=document.getElementById（'title_input'）；
inputBoxTitle.onkeyup=函数（）{
document.getElementById（'title'）.innerHTML=inputBoxTitle.value；
}
//联系人姓名
var inputBoxConName=document.getElementById（'con_name_input'）；
inputBoxConName.onkeyup=函数（）{
document.getElementById（'con_name'）。innerHTML=inputBoxConName.value；
}
//联系电子邮件
var inputBoxEmail=document.getElementById（'email_input'）；
inputBoxEmail.onkeyup=函数（）{
document.getElementById（'email'）.innerHTML=inputBoxEmail.value；
}
//联络电话
var inputBoxPhone=document.getElementById（'phone_input'）；
inputBoxPhone.onkeyup=函数（）{
document.getElementById（'phone'）.innerHTML=inputBoxPhone.value；
}
//动物名
var inputAnimalName=document.getElementById（'name_animal_input'）；
inputAnimalName.onkeyup=函数（）{
document.getElementById（'animal_name'）。innerHTML=inputAnimalName.value；
}
//失物招领日期
var inputLostDate=document.getElementById（'date_lost_input'）；
inputLostDate.onkeyup=函数（）{
document.getElementById（'date_lost'）。innerHTML=inputLostDate.value；
}
//失物招领
var inputLostFound=document.getElementsByName（'lost_input'）；
（功能（）{
对于（变量i=0；i”+inputBoxConName+“
”+inputBoxPhone；
$（'inputBoxTitle，inputBoxConName，inputBoxPhone'）.onkeyup，function（）{
document.getElementsByClassName（'tear_off_data'）.innerHTML=document.write（res）；
}

.main行{
柔性包装：nowrap；
单词break：打破一切；
}
.列，.旋转{
边框：1px虚线；
-webkit-box-flex:1；
弹性：110；
}
.轮换{
高度：270px；
空白：nowrap；
宽度：0；
}
.旋转>div{
-webkit变换：平移（0px，110px）旋转（-90度）；
变换：平移（0px，110px）旋转（-90度）；
}
.旋转>分割>跨度{
边框底部：1px实心#ccc；
}

无标题文件
圣安东尼奥宠物救援
寻找失物招领处/流浪处、狗和猫

在这里插入您的标题
联系人姓名
联络电话
联系电子邮件
动物名称（如已知）
找到/丢失日期
主导色
动物品种
失物招领处
性
男性
女性
微芯片是不是未知
在此处添加说明
在此处选择您的图片
由您的JBGoodwin房地产经纪人布鲁斯·奥斯本（Bruce Osborne）赞助的房屋买卖和公寓租赁项目。
通过您向Bruce介绍，每购买一套住房或租赁一套公寓，他都会为您选择的宠物救援捐赠50美元。
拯救宠物
寻找失物招领处/流浪处、狗和猫
微芯片
在…上
addEventListener（'load'，function（））{
document.querySelector（'input[type=“file”]”）。addEventListener（'change'，function（）{
if（this.files&&this.files[0]）{
var img=document.querySelector（'img'）；/$（'img'）[0]
img.src=URL.createObjectURL（this.files[0]）；//将src设置为文件URL
}
});
});

元素变量后缺少

.value

您也不需要调用document.write（）

“撕掉”

var res = inputBoxTitle.value + "<br>" + inputBoxConName.value + "<br>" + inputBoxPhone.value;
    $('inputBoxTitle, inputBoxConName, inputBoxPhone').onkeyup, function(){
        document.getElementsByClassName('tear_off_data').innerHTML = res;
    }

(function (){
    for(var i = 0; i < inputLostFound.length; i++){
        inputLostFound[i].onclick = function(){
            document.getElementById('lost_found').innerText = this.value;
        }
    }
})();

for(var i = 0; i < inputLostFound.length; i++){
    inputLostFound[i].onclick = function(){
        document.getElementById('lost_found').innerText = this.value;
    }
}