קורס Front-End Web Development שיעור טיפול באירועים

דיונים מקורסים
#1
זה נושא דיון מלווה לערך המקורי ב- https://www.tocode.co.il/bundles/html5-web-development/lessons/dom-events
#2

אני לא מבין איך השורה הזו עובדת :slight_smile:

var index = Math.floor(Math.random() * messages.length);

היה ציריך להיות תמיד תוצאה של 0?

#3

למה 0? הכל תלוי מה הגודל של messages. בוא נניח שיש שם 5 איברים:

  1. הפונקציה Math.random מחזירה מספר בין 0 ל-1. כפול אותו ב-5 וקיבלת מספר בין 0 ל-4 (אבל עם נקודה עשרונית).

  2. הפונקציה Math.floor מוחקת את כל מה שמימין לנקודת העשרונית ועכשיו יש לך מספר שלם בין 0 ל-4.

לייק 1
#4

הי,

באמצע שאני רושמת את התרגיל לאחר כמה פעמים שאני מריצה… לפתע לא מצליחה להריץ

image
image1366×768 105 KB

ניסתי לסגור לפתוח אך לא הבנתי באיזה בעיה מדובר
אשמח לקבל תשובה מהירה

#5

הי,
בסוף לא יצא כל כך מהר - זה הסתדר?

מאיזושהי סיבה ה Brackets איבד קשר לכרום. אולי סגרת את הטאב שלו בטעות או שניווטת למקום אחר או שסתם באג איפשהו בחיבור שלא קשור אלייך.

במצב כזה כדאי לסגור ולפתוח גם את הכרום וגם את Brackets כדי לאתחל את החיבור

#6

מה יכול לגרום לדפדפן לבצע את הפקודה שבפונקצית Event Handler לשניה אחת, ואח"כ לחזור למצב המקורי?

#7

מה הכוונה ״לשניה אחת ואחר כך לחזור למצב המקורי״?

#8

לדוג’ הוא נדרש לכתוב שלום, אז הוא מציג את המילה שלום על החלון למשך שניה, ומיד אח"כ מוחק אותה

#9

במצב כזה תרצה להגדיר שתי פונקציות: אחת שמטפלת באירוע והשניה שמוחקת את הטקסט

function handleClick() {
}

function resetState() {
}

בפונקציית הטיפול באירוע תכתוב את הקוד שכותב את הטקסט על המסך (או כל דבר שאתה צריך לעשות), בפונקציה reset תכתוב את הקוד שמאפס את מה שעשית. בסוף תפעיל setTimeout מהפונקציה הראשונה שיקרא לשניה.

כלומר אם לדוגמא אנחנו מדברים על כתיבת טקסט זה יראה בערך כך:


const element = document.querySelector('p');

function handleClick() {
  element.textContent = 'hello';
  setTimeout(resetState, 2000);
}

function resetState() {
  element.textContent = '';
}
#10

השאלה שלי לא היתה ברורה, הבעיה שלי היא שהוא כותב ומוחק, לא זה מה שאני מנסה לעשות.
אבל תודה על התשובה.
עוד שאלה, איך אפשר למחוק אלמנט קים מתוך הדף שלי? וכן איך מסתירים אלמנט?

#11

בשביל למחוק אלמנט יש שתי אפשרויות

הדרך הקלה היא פשוט לשנות את ה display שלו ל none. למשל אם יש לך אלמנט עם id=demo אפשר לכתוב:

const el = document.querySelector('#demo');
el.style.display = 'none';

דרך שניה שגם עובדת היא למחוק אותו מה DOM עם removeChild. כאן אתה צריך להגיע להורה שלו אז נוכל לכתוב:

const el = document.querySelector('#demo');
const parent = el.parentElement;
parent.removeChild(el);
#12

תודה, מה ביחס לשאלה שלי, מה אפשר לעשות כדי שהוא לא ימחק אוטומטית אחרי שניה?

#13

נראה לי שעדיין לא הבנתי את השאלה - יכול לפרסם דוגמת קוד?

#14 
<html>
<head>
    
    <style> label{ margin: 20px; } button{ padding: 10px;margin: 10px;} div{ border: 1px solid; width: 200px; min-height: 100px; }</style>
</head>
<body dir="rtl">
<form>
    <label>שם משפחה: <input type="text" id="famely"></label>
    <label>שם פרטי: <input type="text" id="name"></label><br><br>
    <label>כתובת: <input type="text" id="adress"></label>
    <label>עיר: <input type="text" id="city"></label><br><br>
    <label>טלפון: <input type="tel" id="phone"></label>
    <label>מצב משפחתי:   רוק<input name = "matzav" type="radio" id="ravak">נשוי<input name = "matzav" type="radio" id="ravak"></label><br><br>
    <button id="ok">אישור</button> <button id="new">עובד חדש</button>
    <div></div>
    
</form>
<script src="tofes.js"></script>   
</body>
</html>```
זה דף ה html
var div = document.querySelector('div');
var ok = document.getElementById('ok');
var chdash = document.getElementById('new');
function massege(){
    var pratim = document.querySelectorAll('input');
    div.innerHTML = "שלום ל" + pratim[1].value +" " + pratim[0].value;    
}
ok.addEventListener('click', massege);
זה דף ה java script.
מה שקורה שכשלוחצים על אישור הוא מציג שלום כמו שצריך ואחרי שניה נעלמת ההודעה וגם התכולה של התיבות נמחקת
#15

הי,
הבעיה היא שלחיצה על הכפתור גורמת גם לאירוע submit של הטופס. ה submit של הטופס טוען מחדש את הדף (זו התנהגות ברירת המחדל של אירוע זה) ולכן ההודעה שלך נמחקת.

פיתרון קל הוא לבטל את פעולת ברירת המחדל של האירוע. בשביל זה צריך לקחת את אוביקט האירוע ולהפעיל עליו את הפונקציה preventDefault. זה נראה ככה:

function massege(ev){
  ev.preventDefault();
    var pratim = document.querySelectorAll('input');
    div.innerHTML = "שלום ל" + pratim[1].value +" " + pratim[0].value;    
}

יצרתי כאן גירסא עובדת בקודפן: