প্রোগ্রামগতভাবে একটি img ট্যাগের src পরিবর্তন করুন

Question

আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে srcকোনও imgট্যাগের বৈশিষ্ট্য পরিবর্তন করতে পারি ?

<img src="../template/edit.png" name=edit-save/>

প্রথমে আমার কাছে একটি ডিফল্ট এসআরসি রয়েছে যা "../template/edit.png" এবং আমি এটি "../template/save.png" অনক্লিক দিয়ে পরিবর্তন করতে চেয়েছিলাম।

আপডেট: এখানে আমার এইচটিএমএল অনক্লিক:

<a href='#' onclick='edit()'><img src="../template/edit.png" id="edit-save"/></a>

এবং আমার জেএস

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }
}

আমি এটি সম্পাদনা () এর ভিতরে সন্নিবেশ করানোর চেষ্টা করেছি, এটি কাজ করে তবে চিত্রটি দুবার ক্লিক করা দরকার

var edit_save = document.getElementById("edit-save");
    edit_save.onclick = function(){
       this.src = "../template/save.png";
    }

Answer 1

আপনার আইএমজি ট্যাগকে একটি আইডি দিন, তবে আপনি পারেন

document.getElementById("imageid").src="../template/save.png";

Comments

কোনও ইনপুটের মান নির্ধারণ করা বা কোনও চিত্র src পরিবর্তন করার মতো সহজ জিনিসের জন্য ( বিশেষত যখন আপনি আইডি রয়েছে এমন উপাদানগুলি ব্যবহার করেন) আপনার jQuery এড়ানোর চেষ্টা করা উচিত, যেহেতু কলটি খাঁটি জেএস কলের চেয়ে অনেক ধীর গতির

— ব্রায়ান লেশম্যান

@ উইলিয়াম 44isme এবং আমাদের পৃষ্ঠাটি আগের চেয়ে ধীরে লোড হবে। আমি মনে করি যে jQuery কেবল একই ওয়েবসাইট ব্যবহার করে এমন ওয়েবসাইটগুলির জন্য দরকারী, খুব বেশি। উদাহরণস্বরূপ যদি আমরা উপরের কোডটি 30 বা 50 বারের বেশি ব্যবহার করি। সুতরাং এটি jQuery ব্যবহার করা প্রয়োজন

— মাহদি জাজিনি

Answer 2

আপনি jquery এবং জাভাস্ক্রিপ্ট উভয় পদ্ধতি ব্যবহার করতে পারেন: উদাহরণস্বরূপ আপনার কাছে দুটি চিত্র থাকে:

<img class="image1" src="image1.jpg" alt="image">
<img class="image2" src="image2.jpg" alt="image">

1) জ্যাকারি পদ্ধতি->

$(".image2").attr("src","image1.jpg");

2) জাভাস্ক্রিপ্ট পদ্ধতি->

var image = document.getElementsByClassName("image2");
image.src = "image1.jpg"

এই জাতীয় ইস্যুতে jquery ব্যবহার করা সহজ।

Comments

পোস্টারটি কখনও jQuery সমাধানে কোনও আগ্রহের ইঙ্গিত দেয় না। বা jQuery পদ্ধতি সহজ নয়। জিকিউরি সলিউশন সহ জেএস প্রশ্নের উত্তর দিবেন না (যদি না পোস্টটি বোঝায় যে তারা এটি চায়)) এটি কেবল জেএস শিখার চেষ্টা করা লোককে বিভ্রান্ত করে।

— মেটাকালিন

getElementByClassName সমস্ত উপাদানগুলির সংগ্রহ প্রদান করে। আমাদেরও উপাদানটির সূচি উল্লেখ করতে হবে। var চিত্র = ডকুমেন্ট.জিট এলিমেন্টসওয়াই ক্লাসনাম ("চিত্র 2") [0]; image.src = "image1.jpg"

— তুষার গৌরব

Answer 3

আপনি যদি JQuery লাইব্রেরি ব্যবহার করেন তবে এই নির্দেশনাটি ব্যবহার করুন:

$("#imageID").attr('src', 'srcImage.jpg');

Comments

প্রশ্নটি jQuery উত্তর জিজ্ঞাসা করে না, একটি jQuery ট্যাগ অন্তর্ভুক্ত করে, বা পরামর্শ দেয় যে jQuery ব্যবহার করা ঠিক আছে।

— পপনুডলস

যখন কোনও সমতুল্য ফাংশন জাভাস্ক্রিপ্টে তৈরি করা হয় তখন লোকেরা jQuery ব্যবহার করতে বলার অর্থ হয় না। প্রতিটি জেএস প্রশ্নের কোনও jQuery উত্তর প্রয়োজন হয় না। এই সমাধানটি এমন একটি পাদদেশ যা ভ্যানিলা জেএস ইতিমধ্যে কী করতে পারে তা শিখতে লোকেদের বাধা দেয়।

— মেটা কলিন

Answer 4

এখন ইহা ঠিক আছে

function edit()
{   
    var inputs = document.myform;
    for(var i = 0; i < inputs.length; i++) {
        inputs[i].disabled = false;
    }

    var edit_save = document.getElementById("edit-save");

       edit_save.src = "../template/save.png";                              
}

Answer 5

<img src="../template/edit.png" name="edit-save" onclick="this.src = '../template/save.png'" />

Comments

ইনলাইন জেএস ঠিক একটি দুর্দান্ত ধারণা নয়।

— ফ্লুরোসেন্টগ্রিন 5

Answer 6

এই ক্ষেত্রে, আপনি srcযখন আপনার উপাদানটির প্রথম মানটির পরিবর্তন করতে চান , আপনার কোনও ক্রিয়াকলাপ তৈরি করার দরকার নেই। আপনি উপাদানটিতে এই অধিকারটি পরিবর্তন করতে পারেন:

<a href='#' onclick='this.firstChild.src="../template/save.png"')'>
  <img src="../template/edit.png" id="edit-save"/>
</a>

এটি করার বিভিন্ন উপায় আপনার কাছে রয়েছে। প্রক্রিয়াটি স্বয়ংক্রিয় করতে আপনি একটি ফাংশনও তৈরি করতে পারেন:

function changeSrc(p, t) { /* where p: Parent, t: ToSource */
  p.firstChild.src = t
}

তারপর তুমি পারো:

<a href='#' onclick='changeSrc(this, "../template/save.png");'>
  <img src="../template/edit.png" id="edit-save"/>
</a>

Answer 7

আপনি যে স্নিপেট সরবরাহ করেছেন (এবং উপাদানগুলির পিতামাতার সম্পর্কে অনুমান করা ছাড়াই) আপনি চিত্রটির সাথে একটি রেফারেন্স পেতে পারেন

document.querySelector('img[name="edit-save"]');

এবং এর সাথে src পরিবর্তন করুন

document.querySelector('img[name="edit-save"]').src = "..."

যাতে আপনি এর সাথে কাঙ্ক্ষিত প্রভাব অর্জন করতে পারেন

var img = document.querySelector('img[name="edit-save"]');
img.onclick = function() {
    this.src = "..." // this is the reference to the image itself
};

অন্যথায়, অন্যদের পরামর্শ অনুসারে, আপনি যদি কোডটির নিয়ন্ত্রণে থাকেন, তবে idইমেজটির সাথে একটি রেফারেন্স নির্ধারণ করা ভাল getElementById(যেহেতু এটি কোনও উপাদান পুনরুদ্ধারের দ্রুততম পদ্ধতি)

Answer 8

আপনার চিত্র একটি আইডি দিন। তারপরে আপনি এটি আপনার জাভাস্ক্রিপ্টে করতে পারেন।

document.getElementById("blaah").src="blaah";

যে কোনও উপাদানটির কোনও বৈশিষ্ট্যের মান পরিবর্তন করতে আপনি ".___" পদ্ধতিটি ব্যবহার করতে পারেন।

Answer 9

আপনার ট্যাগটির পিতামাতার মতো ট্যাগ থাকতে পারে। এজন্য আপনাকে দুটি সময় ছবিতে ক্লিক করতে হবে।

আমার জন্য সমাধানটি হ'ল: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb