עזרה דחופה מאד ב html

דוד יצחק · 28/12/20

היי
יש לי שאלה דחופה ב html
אם יש כאן מישהו שמתמצא בזה אשמח אם הוא ידבר איתי בפרטי.
תודה רבה!!!!!!

1ֹ_RACHEL · 28/12/20

למה שלא תכתוב כאן את השאלה וננסה לעזור?

אלעזר 1 · 28/12/20

דוד יצחק · 28/12/20

למשל יש לי 5 div בדף, כשבברירת מחדל אף אחת מהם אינם מוצגות (display:none) ויש לי תיבת בחירה (select) עם 6 options ואני רוצה שכשאני בוחר אפשרות מס’1 אז div מספר1 יוצג. וכך הלאה.
השאלה היא איך עושים בjs שזה יקרה…

תודה

שירה 123 · 28/12/20

זה משנה מצב לפי ID

קוד:

document.getElementById(x).style.display = "what ever u need";

אם כל הדיווים מאותו הקלאס
אתה יכול לתת להם ID שונה - ואז להפעיל את הקוד שלמעלה לפי זה.
i יקבל את הדיו מהקלאס הנבחר לפי הפונקציה בה תשתמש.
למשל אם אתה רוצה את הדיו השני- i=1
X יאכסן את הID

קוד:

  var x = document.getElementsByClassName("myClass")[i].id;

מקווה שזה ברור

אלעזר 1 · 28/12/20

אפשר לתת ID לכל אחד בנפרד ובמקביל לתת value לכל אפשרות בתפריט הבחירה ואז להשתמש באירוע onchange של תפריט הבחירה כדי לשנות את ההגדרות בהתאם

למתקדמים יש אופציות יותר מורכבות של זיהוי אינדקס של ה-DIV המבוקש

שירה 123 · 28/12/20

משהו כזה

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
.try {
  width:80px;
  height: 20px;
  background-color: lightblue;
  display:none;
}
</style>
</head>
<body>

<div class="try" id="myTry1" >HTML</div>
<div class="try" id="myTry2" >CSS</div>
<div class="try" id="myTry3" >JavaScript</div>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>

function myFunction() {
  var x = document.getElementsByClassName("try")[1].id;
  document.getElementById("demo").innerHTML = x;
  document.getElementById(x).style.display = "inline";
}
</script>

</body>
</html>

זה הפלט

דוד יצחק · 29/12/20

נכתב ע"י אלעזר 1:
אפשר לתת ID לכל אחד בנפרד ובמקביל לתת value לכל אפשרות בתפריט הבחירה ואז להשתמש באירוע onchange של תפריט הבחירה כדי לשנות את ההגדרות בהתאם

ככה אני רוצה לעשות.
אתה יכול בבקשה לכתוב את הקוד המלא? שים לב שכל ה div הם בעצם באותו מקום בדף.

נכתב ע"י שירה 123:

משהו כזה

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
.try {
  width:80px;
  height: 20px;
  background-color: lightblue;
  display:none;
}
</style>
</head>
<body>

<div class="try" id="myTry1" >HTML</div>
<div class="try" id="myTry2" >CSS</div>
<div class="try" id="myTry3" >JavaScript</div>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>

function myFunction() {
  var x = document.getElementsByClassName("try")[1].id;
  document.getElementById("demo").innerHTML = x;
  document.getElementById(x).style.display = "inline";
}
</script>

</body>
</html>

זה הפלט
צפה בקובץ המצורף 793100

לא לזה התכוונתי...
אני רוצה את זה ב select לא ב button.

תודה

אלעזר 1 · 29/12/20

כתבתי ב-JQUERY, מקוה שמתאים לך:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>select example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<select id="divs" name="divs" class="custom-select">
    <option value="val1" selected>1</option>
    <option value="val2">2</option>
    <option value="val3">3</option>
    <option value="val4">4</option>
    <option value="val5">5</option>
  </select>
<div id="rows">
<div id="val1">
<p>שורה ראשונה</p>
</div>
<div id="val2">
<p>שורה שניה</p>
</div>
<div id="val3">
<p>שורה שלישית</p>
</div>
<div id="val4">
<p>שורה רביעית</p>
</div>
<div id="val5">
<p>שורה חמישית</p>
</div>
</div>
<script>
$(document).ready(function(){
    v = $('#divs').val();
    //console.log(v);
    $('#rows > div').hide();
    $('#'+v).show();
    $('#divs').change(function(){
        v = this.value;
        //console.log(v);
        $('#rows > div').hide();
        $('#'+v).show();
    });
});
</script>
</body>
</html>

דוד יצחק · 29/12/20

נכתב ע"י אלעזר 1:

כתבתי ב-JQUERY, מקוה שמתאים לך:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>select example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<select id="divs" name="divs" class="custom-select">
    <option value="val1" selected>1</option>
    <option value="val2">2</option>
    <option value="val3">3</option>
    <option value="val4">4</option>
    <option value="val5">5</option>
  </select>
<div id="rows">
<div id="val1">
<p>שורה ראשונה</p>
</div>
<div id="val2">
<p>שורה שניה</p>
</div>
<div id="val3">
<p>שורה שלישית</p>
</div>
<div id="val4">
<p>שורה רביעית</p>
</div>
<div id="val5">
<p>שורה חמישית</p>
</div>
</div>
<script>
$(document).ready(function(){
    v = $('#divs').val();
    //console.log(v);
    $('#rows > div').hide();
    $('#'+v).show();
    $('#divs').change(function(){
        v = this.value;
        //console.log(v);
        $('#rows > div').hide();
        $('#'+v).show();
    });
});
</script>
</body>
</html>

תודה!!!!!
אם אתה יכול בבקשה לעשות את זה בקובץ 1 יהיה לי יותר קל.
חייבים את כל ה3 js?

דוד יצחק · 29/12/20

ועוד משהו, אני רוצה שבטעינה הראשונה של הדף יהיה option משהו כמו "בחר" - כאשר אף 1 מה div מוצג ובבחירת option אחר ה div יוצג.
תודה!!!
זה בהחלט מאד דחוף לי להיום, מקסימום מחר. תודה!!

אלעזר 1 · 29/12/20

נכתב ע"י דוד יצחק:
תודה!!!!!
אם אתה יכול בבקשה לעשות את זה בקובץ 1 יהיה לי יותר קל.
חייבים את כל ה3 js?

כדאי שתלמד קצת על JQUERY ובוטסטראפ. ולא, אי אפשר לכלול את כל הספריות האלו בקובץ אחד, כי הן ממש גדולות.
אם מתחשק לך, אתה יכול להוריד אותם ולשים על השרת שלך. היתרון בשימוש ב-CDN של גוגל-API הוא שהרבה אתרים משתמשים בזה וזה כבר נמצא במטמון של הגולש, מה שחוסך בזמן הטעינה של העמוד.

ספציפית לקטע קוד הזה באמת אין צורך ב-בוטסטראפ, אבל תראה את ההבדל לבד...

דוד יצחק · 29/12/20

נכתב ע"י אלעזר 1:
כדאי שתלמד קצת על JQUERY ובוטסטראפ. ולא, אי אפשר לכלול את כל הספריות האלו בקובץ אחד, כי הן ממש גדולות.
אם מתחשק לך, אתה יכול להוריד אותם ולשים על השרת שלך. היתרון בשימוש ב-CDN של גוגל-API הוא שהרבה אתרים משתמשים בזה וזה כבר נמצא במטמון של הגולש, מה שחוסך בזמן הטעינה של העמוד.

ספציפית לקטע קוד הזה באמת אין צורך ב-בוטסטראפ, אבל תראה את ההבדל לבד...

שוב, אני רוצה להשתמש רק ב css וב js אז למה אי אפשר לעשות ככה

קוד:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <title>כותרת</title> </head> <body> <select onchange="myf()"> <option>בחר‏...‎</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>‏ <div id="1"> מספר 1 </div> <div id="2> מספר 2 </div> <div id="3>מספר 3‎ </div> <script> myf() ‎//‎איך ממשיכים מפה?‏ </script> </body> </html>

דוד יצחק · 31/12/20

מישהו הביא לי קוד שלא עובד, אשמח להסבר מדוע זה לא עובד

קוד:

<style> div{ display: none; } </style> </head> <body> <select onchange="displayDiv()"> <option value="div1">1</option> <option value="div2">2</option> <option value="div3">3</option> <option value="div4">4</option> <option value="div5">5</option> </select> <div id="div1">אחד</div> <div id="div2">שתים</div> <div id="div3">שלוש</div> <div id='div4'>ארבע</div> <div id='div5'>חמש</div> <script> function displayDiv(){ let divs =document.querySelectorAll('div') let select = document.querySelector('select').value divs.forEach(div => { if (div.id === select){ div.style.display='block' } }); } </script> </body>

שירה שרה · 31/12/20

יש לי דרך לפתרון בלי ג'ייקורי, עם ג'אבה סקריפט בלבד.
מצרפת 2 צילומי מסך.

לפי בדיקה שלי, זה עובד מצוין.

אלעזר 1 · 31/12/20

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

קח את זה:

HTML:

<!DOCTYPE html>
<html>
<body>

<select onchange="myFunction()" id="mySelect">
    <option value="1">1 דיב</option>
    <option value="2">דיב 2</option>
    <option value="3">דיב 3</option>
    <option value="4">דיב 4</option>
    <option value="5">דיב 5</option>

</select>
<div id="displays">
<div id="div1" style="display:none">1</div>
<div id="div2" style="display:none">2</div>
<div id="div3" style="display:none">3</div>
<div id="div4" style="display:none">4</div>
<div id="div5" style="display:none">5</div>
</div>

<script>
function myFunction(){
    var x = document.getElementById('mySelect').value;
  console.log(x);
  var y = document.getElementById('displays').getElementsByTagName('div');
  for (var i=0; i < y.length; i++) {
    y[i].style.display = 'none';
}

    document.getElementById('div' + x).style.display = 'block';
  
}
</script>

</body>
</html>

דוד יצחק · 31/12/20

נכתב ע"י שירה שרה:
יש לי דרך לפתרון בלי ג'ייקורי, עם ג'אבה סקריפט בלבד.
מצרפת 2 צילומי מסך.צפה בקובץ המצורף 795496 צפה בקובץ המצורף 795497
לפי בדיקה שלי, זה עובד מצוין.

תוכלי בקשה להעלות את זה כטקסט? קשה לי להעתיק את זה

דוד יצחק · 31/12/20

נכתב ע"י אלעזר 1:

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

קח את זה:

HTML:

<!DOCTYPE html>
<html>
<body>

<select onchange="myFunction()" id="mySelect">
    <option value="1">1 דיב</option>
    <option value="2">דיב 2</option>
    <option value="3">דיב 3</option>
    <option value="4">דיב 4</option>
    <option value="5">דיב 5</option>

</select>
<div id="displays">
<div id="div1" style="display:none">1</div>
<div id="div2" style="display:none">2</div>
<div id="div3" style="display:none">3</div>
<div id="div4" style="display:none">4</div>
<div id="div5" style="display:none">5</div>
</div>

<script>
function myFunction(){
    var x = document.getElementById('mySelect').value;
  console.log(x);
  var y = document.getElementById('displays').getElementsByTagName('div');
  for (var i=0; i < y.length; i++) {
    y[i].style.display = 'none';
}

    document.getElementById('div' + x).style.display = 'block';
  
}
</script>

</body>
</html>

תודה

פרוגבוט

פרסומת

עזרה דחופה מאד ב html

משתמש פעיל

משתמש מקצוען

צוות הנהלה

משתמש פעיל

משתמש סופר מקצוען

צוות הנהלה

משתמש סופר מקצוען

משתמש פעיל

צוות הנהלה

משתמש פעיל

משתמש פעיל

צוות הנהלה

משתמש פעיל

משתמש פעיל

משתמש פעיל

צוות הנהלה

משתמש פעיל

משתמש פעיל

פרוגבוט

תוכן שיווקי

איזה כיף שהצטרפתם לניוזלטר שלנו!