[英]How to store value of an input box in a variable?
我正在嘗試使用 scaledrone 制作聊天應用程序。 我正在關注這個教程: https://www.scaledrone.com/blog/javascript-chat-room-tutorial/但是在設置基本聊天之后,我想讓用戶定義自己的名字。 所以我做了一個輸入框,然后嘗試使用js將輸入框的值取值並賦值給一個變量。 然后對於聊天應用程序的名稱部分,我沒有使用之前使用的隨機名稱 function。 但是,我收到錯誤消息“無法在我的控制台中讀取 null 的屬性(讀取 addEventListener)並且提交按鈕根本沒有顯示。我做錯了什么?我使用的代碼在下面的 pastebin 鏈接中。scaledrone 文檔在這里: https://www.scaledrone.com/docs/api-clients/javascript在此先感謝。此外,我在下面添加了我的 javascript 文件的原始文本,因為堆棧溢出不會讓我在不添加一些代碼的情況下發布(第一次發布到堆棧溢出大聲笑)。
https://pastebin.com/9DvF3WnX https://pastebin.com/UrZ1xsMB
const CLIENT_ID = 'keECa1lpVtgABa1F';
const splash=document.querySelector('.splash');
const stuffjs=document.querySelector('.stuff');
var yourname;
/*function createMenuItem(name) {
let inputname = document.createElement('input');
inputname.placeholder = name;
inputname.className='inputnamefield';
return inputname;
}*/
/*function createButton(btnname){
let btn = document.createElement('input');
btn.type = 'submit';
btn.className='submitbtn';
return btn;
}*/
const inputnameagain=document.querySelector('.inputnamefield');
const buttoon=document.querySelector('.submitbtn');
buttoon.addEventListener('click',(e) => {
setTimeout(()=>{
yourname=inputboxstuff.value()
},1);
});
/*document.addEventListener('DOMContentLoaded',(e)=>{
setTimeout(()=>{
splash.classList.add('display-none');
},2000);
})
splash.addEventListener('mousedown',
(e)=>{
setTimeout(()=>{
splash.parentElement.removeChild(splash);
},1);
})*/
const drone = new ScaleDrone(CLIENT_ID, {
data: { // Will be sent out as clientData via events
name: yourname,
color: getRandomColor(),
},
});
let members = [];
drone.on('open', error => {
if (error) {
return console.error(error);
}
console.log('Successfully connected to Scaledrone');
const room = drone.subscribe('observable-room');
room.on('open', error => {
if (error) {
return console.error(error);
}
console.log('Successfully joined room');
});
room.on('members', m => {
members = m;
updateMembersDOM();
});
room.on('member_join', member => {
members.push(member);
updateMembersDOM();
});
room.on('member_leave', ({id}) => {
const index = members.findIndex(member => member.id === id);
members.splice(index, 1);
updateMembersDOM();
});
room.on('data', (text, member) => {
if (member) {
addMessageToListDOM(text, member);
} else {
// Message is from server
}
});
});
drone.on('close', event => {
console.log('Connection was closed', event);
});
drone.on('error', error => {
console.error(error);
});
function getRandomName() {
const adjs = ["autumn", "hidden", "bitter", "misty", "silent", "empty", "dry", "dark", "summer", "icy", "delicate", "quiet", "white", "cool", "spring", "winter", "patient", "twilight", "dawn", "crimson", "wispy", "weathered", "blue", "billowing", "broken", "cold", "damp", "falling", "frosty", "green", "long", "late", "lingering", "bold", "little", "morning", "muddy", "old", "red", "rough", "still", "small", "sparkling", "throbbing", "shy", "wandering", "withered", "wild", "black", "young", "holy", "solitary", "fragrant", "aged", "snowy", "proud", "floral", "restless", "divine", "polished", "ancient", "purple", "lively", "nameless"];
const nouns = ["waterfall", "river", "breeze", "moon", "rain", "wind", "sea", "morning", "snow", "lake", "sunset", "pine", "shadow", "leaf", "dawn", "glitter", "forest", "hill", "cloud", "meadow", "sun", "glade", "bird", "brook", "butterfly", "bush", "dew", "dust", "field", "fire", "flower", "firefly", "feather", "grass", "haze", "mountain", "night", "pond", "darkness", "snowflake", "silence", "sound", "sky", "shape", "surf", "thunder", "violet", "water", "wildflower", "wave", "water", "resonance", "sun", "wood", "dream", "cherry", "tree", "fog", "frost", "voice", "paper", "frog", "smoke", "star"];
return (
adjs[Math.floor(Math.random() * adjs.length)] +
"_" +
nouns[Math.floor(Math.random() * nouns.length)]
);
}
function getRandomColor() {
return '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
}
//------------- DOM STUFF
const DOM = {
membersCount: document.querySelector('.members-count'),
membersList: document.querySelector('.members-list'),
messages: document.querySelector('.messages'),
input: document.querySelector('.message-form__input'),
form: document.querySelector('.message-form'),
};
DOM.form.addEventListener('submit', sendMessage);
function sendMessage() {
const value = DOM.input.value;
if (value === '') {
return;
}
DOM.input.value = '';
drone.publish({
room: 'observable-room',
message: value,
});
}
function createMemberElement(member) {
const { name, color } = member.clientData;
const el = document.createElement('div');
el.appendChild(document.createTextNode(name));
el.className = 'member';
el.style.color = color;
return el;
}
function updateMembersDOM() {
DOM.membersCount.innerText = `${members.length} users in room:`;
DOM.membersList.innerHTML = '';
members.forEach(member =>
DOM.membersList.appendChild(createMemberElement(member))
);
}
function createMessageElement(text, member) {
const el = document.createElement('div');
el.appendChild(createMemberElement(member));
el.appendChild(document.createTextNode(text));
el.className = 'message';
return el;
}
function addMessageToListDOM(text, member) {
const el = DOM.messages;
const wasTop = el.scrollTop === el.scrollHeight - el.clientHeight;
el.appendChild(createMessageElement(text, member));
if (wasTop) {
el.scrollTop = el.scrollHeight - el.clientHeight;
}
}
如何將輸入框的值存儲在變量中
const inputnamefield = document.querySelector('.inputnamefield');
const button = document.querySelector('.submitbtn');
button.addEventListener('click', (e) => {
setTimeout(() => {
const yourname = inputnamefield.value
}, 1);
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.