تغيير الرابط الذي يفتحه زر بلغة جافاسكربت بشكل ديناميكي

علي باظروس · 26 يونيو 2021

عندي خيارين اذا اختر الاول ينقلني الزر على صفحة واذا اخترت الثاني ابغا نفس الزر ينقلني على صفحة اخرى كيف ممكن اعمله بالجافا سكربت

تم التعديل في 26 يونيو 2021 بواسطة Wael Aljamal
توضيح السؤال

بلال زيادة · 26 يونيو 2021

يمكنك إنشاء الزرين باستخدام جافاسكريبت باستخدام دالة

document.createElement('a');

بهذا الشكل

// إنشاء الزرين
var btnOne = document.createElement('a'); 
var btnTwo = document.createElement('a');

ثم نقوم بإضافة عنوان لكل زر باستخدام دالة

var linkOne = document.createTextNode("الزر الأول");
var linkOne = document.createTextNode("الزر الأول");

ثم نقوم بإضافة العنوان لكل زر بهذا الشكل

btnOne.appendChild(linkOne);
btnTwo.appendChild(linkTwo);

ثم نقوم بوضع خاصية href لكل عنصر بهذا الشكل

btnOne.href = "page1.html"; 
btnTwo.href = "page2.html";

ثم نقوم بإضافة الزرين إلى الصفحة

document.body.appendChild(btnOne); 
document.body.appendChild(btnTwo);

عبدالباسط ابراهيم · 26 يونيو 2021

أعتقد أنك تريد تغيير عنوان الرابط الأول عند الضغط على زر آخر ويمكنك عمل ذلك من خلال تغيير ال href بواسطة javascript كالتالي

var button = document.getElementById("button"); //الزر  يقوم بتغيير الرابط
var link = document.getElementById("mylink");//الرابط  

button.addEventListener("click", function(){
          link.setAttribute('href', "http://الرابط الذي تريده");
})

Wael Aljamal · 26 يونيو 2021

ليكن لدينا قائمة select نحدد دالة لتتبع التغييرات فيها عند التغيير onchange تقوم هذه الدالة بتغيير الرابط link وهو متغير يخزن الرابط المراد فتحه.

ونربط الزر button بحدث تغيير رابط الصفحة من خلال الخاصية location.href

<html>
<select id="sel" onchange='myFunction()'>
  <option value="http://www.google.com">google</option>
  <option value="http://www.w3schools.com">w3s</option>
</select>

<button onclick='openPage()'>Continue</button>

<script>
  var link = "http://www.google.com";
  function myFunction() {
    link = document.getElementById('sel').value;
  }
  function openPage() {
  	window.location.href = link;
  }
</script>

</html>

Yomna Raouf · 26 يونيو 2021

للقيام بهذه الوظيفة سنحتاج إلى حقول إدخال من النوع radio و يكون لها نفس القيمة للخاصية name و لتكن page مثلًا حتى يتم ربطهم معا..

و ستكون قيمة أي ال valie الخاصة بكل حقل إدخال منهم هي الرابط التشعبي للصفحة.

و سنحتاج لوجود زر، ينفذ وظيفة الانتقال بين الصفحات عند النقر عليه، لذبك سنقوم بإنشاء الدالة moveToPage و نقوم باستدعائها عند الضغط على الزر عن طريق ال attribute onClick، بداخل هذا الزر سنقوم بوضع الوسم a و ستكون قيمة href له فارغة بشكل ابتدائي

الآن بداخل هذه الدالة سنحتاج للحصول على الرابط التشعبي الذي تم اختيارة بالضغط على أحد حقول الإدخال، و نقوم بتخزين هذه القيمة في المتغير pageLink.

بعد ان نحصل على الرابط التشعبي الذي تم اختياره، سنقوم بتعيينه كقيمة لل href attribute الخاص بالوسم a

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
      <input type="radio" id="page1" name="page" value="page1.html">
      <label for="html">page 1</label><br>
    
      <input type="radio" id="page2" name="page" value="page2.html">
      <label for="css">page 2</label><br>
     <button onclick="moveToPage()">
       <a class="link" href=""> 
         click me 
       </a> 
    </button>
    
    <script>
      
      function moveToPage() {
         let pageLink = document.querySelector("input[name='page']:checked").value;
         console.log(pageLink)
        
         let link = document.querySelector(".link");
        
         link.href = pageLink;
      }
    </script>
  </body>
</html>