একটি জাভাস্ক্রিপ্ট ফাংশন কল করতে একটি HTML বোতাম ব্যবহার করে

Question

আমি একটি জাভাস্ক্রিপ্ট ফাংশন কল করতে একটি এইচটিএমএল বোতাম ব্যবহার করার চেষ্টা করছি।

কোডটি এখানে:

<input type="button" value="Capacity Chart" onclick="CapacityChart();">

যদিও এটি সঠিকভাবে কাজ করছে বলে মনে হচ্ছে না। এই কাজ করতে একটি ভাল উপায় আছে কি?

এখানে লিঙ্কটি দেওয়া হয়েছে: http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html নীচে বাম অংশে ক্ষমতা ট্যাবে ক্লিক করুন। মানগুলি পরিবর্তন না করা হলে বোতামটি একটি সতর্কতা তৈরি করতে হবে এবং আপনি মানগুলি লিখলে একটি চার্ট তৈরি করা উচিত।

Comments

দয়া করে সংজ্ঞা দিন "সঠিকভাবে কাজ করছে না"। আপনি এটি ক্লিক করলে কোন ত্রুটি ঘটছে?

— মাত্র

বোতামটি আইই 8 তে কাজ করে, তবে জাভাস্ক্রিপ্টের ত্রুটির কারণে এফএফ 3.5 নয় (জেফের উত্তর দেখুন)

— ক্রিস

হ্যাঁ, দস্তাবেজটি দেখা যাচ্ছে all সমস্ত একটি মানহীন আই আই জিনিস; প্রস্তাবিত বিকল্পের সাথে আমার উত্তর আপডেট করুন।

— জেফ

@ পেপার ১৩3737, @ জেফ: ফাংশনটি এখনও আইই 8 তে কাঙ্ক্ষিত প্রভাব অর্জন করতে পারে না, তাই ডকুমেন্টের জন্যও অদলবদল করে।

— অ্যান্ডি ই

Answer 1

এইচটিএমএল / ডিওএম দিয়ে ইভেন্টগুলি পরিচালনা করার কয়েকটি উপায় রয়েছে। সত্যিকারের কোন সঠিক বা ভুল উপায় নেই তবে বিভিন্ন পরিস্থিতিতে বিভিন্ন উপায় কার্যকর।

1: এইচটিএমএলে এটির সংজ্ঞা দেওয়া আছে:

<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />

2: জাভাস্ক্রিপ্টে ইভেন্টটির জন্য এটি ডোম সম্পত্তিটিতে যুক্ত করেছে:

//- Using a function pointer:
document.getElementById("clickMe").onclick = doFunction;

//- Using an anonymous function:
document.getElementById("clickMe").onclick = function () { alert('hello!'); };

3: এবং জাভাস্ক্রিপ্ট ব্যবহার করে ইভেন্ট হ্যান্ডলারের সাথে একটি ফাংশন সংযুক্ত করা হচ্ছে:

var el = document.getElementById("clickMe");
if (el.addEventListener)
    el.addEventListener("click", doFunction, false);
else if (el.attachEvent)
    el.attachEvent('onclick', doFunction);

দ্বিতীয় এবং তৃতীয় উভয় পদ্ধতিই ইনলাইন / বেনামে ফাংশনগুলির জন্য অনুমতি দেয় এবং দস্তাবেজ থেকে উপাদানটি বিশ্লেষণের পরে উভয়ই ঘোষণা করতে হবে। প্রথম পদ্ধতিটি বৈধ এক্সএইচটিএমএল নয় কারণ অনক্লিক বৈশিষ্ট্যটি এক্সএইচটিএমএল স্পেসিফিকেশনে নেই।

1 ম এবং 2 য় পদ্ধতিগুলি পারস্পরিক একচেটিয়া, যার অর্থ একটি (2 য়) ব্যবহার অন্যটি (1 ম )টিকে ওভাররাইড করবে। 3 য় পদ্ধতি আপনাকে একই ইভেন্ট হ্যান্ডলারের সাথে আপনার পছন্দ মতো অনেকগুলি ফাংশন সংযুক্ত করার অনুমতি দেবে, এমনকি যদি প্রথম বা দ্বিতীয় পদ্ধতিটি খুব বেশি ব্যবহৃত হয়।

সম্ভবত, সমস্যাটি আপনার CapacityChart()ফাংশনের কোথাও রয়েছে । আপনার লিঙ্কটি দেখার পরে এবং আপনার স্ক্রিপ্টটি চালানোর পরে, ক্যাপাসিচার্ট () ফাংশনটি চালিত হয় এবং দুটি পপআপ খোলা হয় (স্ক্রিপ্ট অনুসারে একটি বন্ধ থাকে)। যেখানে আপনার নীচের লাইনটি রয়েছে:

CapacityWindow.document.write(s);

পরিবর্তে নিম্নলিখিত চেষ্টা করুন:

CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();

সম্পাদনা করুন
যখন আমি আপনার কোডটি দেখেছি তখন আমার মনে হয়েছিল আপনি এটি IE এর জন্য বিশেষভাবে লিখছেন। অন্যরা যেমন উল্লেখ করেছে আপনার document.allসাথে রেফারেন্সগুলি প্রতিস্থাপন করতে হবে document.getElementById। তবে এর পরেও আপনার স্ক্রিপ্ট ঠিক করার কাজ থাকবে তাই আমি কোডটি ক্রস ব্রাউজারে পরিবর্তন করে নেওয়া যে কোনও ভুলকে আরও বিভ্রান্তির কারণ হতে পারে হিসাবে কমপক্ষে IE এ প্রথম কাজ করার পরামর্শ দিচ্ছি। এটি আইতে কাজ করার পরে আপনি কোডটি আপডেট করছেন এমন সময় এটি অন্য ব্রাউজারগুলিতে কাজ করছে কিনা তা বলা সহজ হবে।

Comments

Jquery ব্যবহার করে, এছাড়াও রয়েছে: $("#clickMe").bind('click', function () { alert('hello!'); };)

— রোমান

Answer 2

আমি বলব জাভাস্ক্রিপ্টটি একটি অ-বিঘ্নিত পদ্ধতিতে যুক্ত করা ভাল ...

jQuery ব্যবহার করে আপনি যেমন কিছু করতে পারেন:

<script>
  $(document).ready(function(){
    $('#MyButton').click(function(){
       CapacityChart();
    });
  });
</script>

<input type="button" value="Capacity Chart" id="MyButton" >

Comments

একমত। অনেক ক্ষেত্রে, jQuery এবং অন্যান্য ফ্রেমওয়ার্কগুলি সামান্য পরিমাণে জাভাস্ক্রিপ্টের জন্য নিখুঁত ওভারকিল এবং সমস্ত জাভাস্ক্রিপ্ট কোড ক্রস ব্রাউজারের প্রয়োজন হয় না।

— অ্যান্ডি ই

যথাযথভাবে .. আমি যে পয়েন্টটি করার চেষ্টা করছিলাম সেটি ছিল "এটি করার একটি আরও ভাল উপায়" হ'ল বিবাদহীন ... jQuery ব্যতীত এরকম কিছু: var btn = document.getElementById ('মাইবাটন'); বিটিএন.অনলিক = ফাংশন () {ক্যাপাসিচার্ট ();}

— পল

JQuery ব্যবহার করা এই লোকেরা এটি ওয়েবের সমস্ত কিছুর জন্য ব্যবহার করে সেট আপ করা আছে বলে মনে হয়। কারও জন্য ফ্ল্যাট জাভাস্ক্রিপ্ট ব্যবহার সম্পর্কে? মঙ্গলভাব, jQuery সত্যিই এখন আমার স্নায়ুতে পেয়ে যাচ্ছে। হাঃ হাঃ হাঃ! আমি এটিকে ওয়েব তৈরির অলস উপায় বলে আছি, কারণ আমার ধারণা এটি সত্যই।

— ডক্টরলুই

@ ডিআললুই: আমার কাছে jQuery এর বিপরীতে কিছুই নেই, এটি অনেক সমস্যার একটি ভাল সমাধান, তবে যখন এটি ট্যাগ করা বা ওপি কর্তৃক জিজ্ঞাসা করা না হয় তবে জা-কোয়েরির কোনও উল্লেখও একটি নন-জিক্যুরি পদ্ধতিতে সহায়তা করা উচিত, অন্যথায় তারা ঝুঁকিটি চালান ক) প্রশ্নকর্তাকে বিভ্রান্ত করা - জিকুয়ারি কী তা তিনি জানেন না বা খ) প্রশ্নকর্তাকে জাভাস্ক্রিপ্ট কোডের কয়েকটি লাইনের জন্য jQuery ব্যবহার করার কথা বলে তাকে বিরক্ত করছেন। @ পল - আমি অবশ্যই বলতে পারি যে এটি দুর্দান্ত পড়া ছিল না ...

— অ্যান্ডি ই

ক্ষমা প্রার্থনা ... ভুল লিঙ্ক পোস্ট - মানে একটি স্ট্যাকওভারফ্লো পোস্ট করা। stackoverflow.com/questions/1588374/…

— পল

Answer 3

আপনার এইচটিএমএল এবং বোতামটি থেকে আপনি যেভাবে ফাংশনটি কল করছেন তা সঠিক দেখাচ্ছে।

সমস্যাটি CapacityCountফাংশনে উপস্থিত বলে মনে হচ্ছে । আমি ফায়ারফক্স 3.5 তে আমার কনসোলে এই ত্রুটিটি পেয়ে যাচ্ছি: বেন্ডেলকার্প.জেএস এর 759 লাইনে "ডকুমেন্ট.সাল অপরিজ্ঞাত"।

সম্পাদনা:

দেখে মনে হচ্ছে document.allএটি কেবলমাত্র আইআই-এর জিনিস এবং এটি ডিওএম অ্যাক্সেস করার একটি নন-স্ট্যান্ডার্ড উপায়। আপনি যদি ব্যবহার করেন তবে document.getElementById()এটি সম্ভবত কাজ করা উচিত। উদাহরণ: document.getElementById("RUnits").valueপরিবর্তেdocument.all.Capacity.RUnits.value

Comments

এটি বিশেষত ফাংশনটির সাথে সমস্যা নয়, যা আইই

— এন্ডি ই

Answer 4

এটি সঠিক দেখাচ্ছে। আমার ধারণা আপনি নিজের ফাংশনটি অন্য কোনও নাম দিয়ে বা এমন একটি প্রসঙ্গে বা সংজ্ঞায়িত করেছেন যা বোতামটির কাছে দৃশ্যমান নয়। দয়া করে কিছু কোড যুক্ত করুন

Answer 5

ঠিক তাই আপনি জানেন যে, ফাংশনটি কল করার সময় সেমিকোলন ( ; ) বোতামে থাকার কথা নয়।

সুতরাং এটি ঠিক দেখতে হবে: onclick="CapacityChart()"

তাহলে এটি সব কাজ করা উচিত :)

Answer 6

আপনার একটি বড় সমস্যা হ'ল আপনি অকারণে ব্রাউজার স্নিফিং ব্যবহার করছেন:

if(navigator.appName == 'Netscape')
    {
      vesdiameter  = document.forms['Volume'].elements['VesDiameter'].value;
      // more stuff snipped
    }
    else
    {
      vesdiameter  = eval(document.all.Volume.VesDiameter.value);
      // more stuff snipped
    }

আমি ক্রোমে আছি, তাই navigator.appNameহবে না Netscape। Chrome কি সমর্থন করে document.all? হতে পারে, কিন্তু তারপর আবার সম্ভবত না। এবং অন্যান্য ব্রাউজারগুলির কী হবে?

Netscapeশাখায় কোডটির সংস্করণটি ১৯৯ 1996 সাল থেকে নেটস্কেপ নেভিগেটর ২-এ ফিরে আসার ঠিক কোনও ব্রাউজারে কাজ করা উচিত, সুতরাং আপনার সম্ভবত এটির সাথে থাকা উচিত ... এটি ব্যতীত না (বা কাজ করার গ্যারান্টিযুক্ত নয়) ) কারণ আপনি উপাদানগুলিতে কোনও nameবৈশিষ্ট্য নির্দিষ্ট করেননি input, তাই elementsনামক উপাদান হিসাবে সেগুলি ফর্মের অ্যারেটিতে যুক্ত করা হবে না :

<input type="text" id="VesDiameter" value="0" size="10" onKeyUp="CalcVolume();">

হয় তাদের নাম দিন এবং elementsঅ্যারে ব্যবহার করুন , বা (আরও ভাল) ব্যবহার করুন

var vesdiameter = document.getElementById("VesDiameter").value;

যা সমস্ত আধুনিক ব্রাউজারে কাজ করবে - কোন ব্রাঞ্চিংয়ের দরকার নেই। কেবল নিরাপদ দিকে থাকতে, getElementByIdসমর্থনের জন্য একটি চেক দিয়ে 4 এর চেয়ে বড় বা সমান ব্রাউজার সংস্করণটির জন্য সেই স্নিফিংকে প্রতিস্থাপন করুন :

if (document.getElementById) { // NB: no brackets; we're testing for existence of the method, not executing it
    // do stuff...
}

আপনি সম্ভবত আপনার ইনপুটটিও বৈধ করতে চান; কিছুটা এইরকম

var vesdiameter = parseFloat(document.getElementById("VesDiameter").value);
if (isNaN(vesdiameter)) {
    alert("Diameter should be numeric");
    return;
}

ঘক.

Comments

হাই নিকফিটস, আমার এখানে একটি চ্যালেঞ্জ হ'ল এই স্ক্রিপ্টটি মূলত 1993 সালে লেখা হয়েছিল - অতএব নেটস্কেপ 4-এর জন্য উল্লেখগুলি I. এটি আপডেট করার ক্ষেত্রে আমার কিছুটা সহায়তা হয়েছিল এবং আমি এটির মনোনীত পৃষ্ঠায় প্রবেশ না করা পর্যন্ত এটি কাজ করেছিল worked

— ফরেস্ট করুন

আমি সন্দেহ করি যে এটি 1993 সালে লেখা হয়েছিল, যেহেতু ব্রেন্ডন আইচ 1995 সাল পর্যন্ত জেএস আবিষ্কার করেন নি enwwikiedia.org/wiki/ জাভাস্ক্রিপ্ট# হিস্টোরি ;-) আমি দৃ strongly ়ভাবেdocument.getElementById অন্য জিনিসগুলি ব্যবহার এবং সরিয়ে দেওয়ার পরামর্শ দেব ।

— নিকফিটস

আমি মনে করি ব্রাউজারের সামঞ্জস্যতা নিয়ে কাজ করার আগে IE এ এটি কমপক্ষে কাজ করা বুদ্ধিমানের কাজ হবে, অন্যথায় তিনি জানেন না যে তার ব্রাউজারের সামঞ্জস্যের সমস্যাগুলি ঠিক হয়ে যাবে কারণ এটি এখনও কাজ করবে না।

— অ্যান্ডি ই

স্ট্যান্ডার্ড ডিওএম কৌশল ব্যবহার করে এটি কাজ করা ভাল, তারপরে :-) কথা বলার জন্য কোনও ব্রাউজারের সামঞ্জস্যতা সমস্যা হবে না

— নিকফিটজ

Answer 7

আপনার কোড এই লাইনে ব্যর্থ হচ্ছে:

var RUnits = Math.abs(document.all.Capacity.RUnits.value);

আমি ফায়ারব্যাগের সাথে যদিও এটির পদক্ষেপের চেষ্টা করেছি এবং এটি সেখানে ব্যর্থ হয়। এটি আপনাকে সমস্যাটি বের করতে সহায়তা করবে।

আপনি jquery রেফারেন্স আছে। আপনি এই সমস্ত ফাংশন হিসাবে এটি ব্যবহার করতে পারেন। এটি আপনার কোডটি উল্লেখযোগ্যভাবে পরিষ্কার করবে।

Comments

যদিও এটি লাইনে IE তে ব্যর্থ হচ্ছে না।

— অ্যান্ডি ই

কারণ ডকুমেন্ট.এল একটি আই আই জিনিস। তার কেবলমাত্র $ ('# RUints') ব্যবহার করা উচিত val এটি কোনও ব্রাউজার পার্থক্যের যত্ন নেয় এবং কোড সাফ করে।

— প্যাট্রিসিয়া

Answer 8

আমার কাছে একটি বুদ্ধিমান ফাংশন-কল-ব্যাকিং বোতাম কোড রয়েছে:

<br>
<p id="demo"></p><h2>Intelligent Button:</h2><i>Note: Try pressing a key after clicking.</i><br>
<button id="button" shiftKey="getElementById('button').innerHTML=('You're pressing shift, aren't you?')" onscroll="getElementById('button').innerHTML=('Don't Leave me!')" onkeydown="getElementById('button').innerHTML=('Why are you pressing keys?')" onmouseout="getElementById('button').innerHTML=('Whatever, it is gone.. maybe')" onmouseover="getElementById('button').innerHTML=('Something Is Hovering Over Me.. again')" onclick="getElementById('button').innerHTML=('I was clicked, I think')">Ahhhh</button>

Answer 9

সহজ উত্তর:

   onclick="functionName(ID.value);

যেখানে আইডি হ'ল ইনপুট ক্ষেত্রের আইডি।

Answer 10

নির্বোধ উপায়:

onclick="javascript:CapacityChart();"

আপনার স্বতন্ত্র জাভাস্ক্রিপ্ট সম্পর্কে পড়া উচিত, এবং কলব্যাকগুলি ডোম ইভেন্টগুলিতে আবদ্ধ করতে একটি ফ্রেমওয়ার্ক বাইন্ড পদ্ধতি ব্যবহার করা উচিত।

Comments

@ ইরেনন: ওহ এসো এটি তার সমস্যা নয়, স্বরলিপিটি পুরোপুরি ঠিক আছে, এবং কেবলমাত্র একটি অন্লিক ইভেন্ট বরাদ্দের জন্য জটিল বাঁধন এবং ফ্রেমওয়ার্কে প্রবেশ করার কোনও কারণ নেই।

— পেক্কা

আমার প্রতিরক্ষা পেক্কা আসার জন্য ধন্যবাদ। আমি সঠিকভাবে কাজ করতে একটি সাধারণ বোতাম চাই।

— ফরেষ্ট

javascript:প্রোটোকল মধ্যে প্রয়োজন নেই onclickইভেন্ট। অনক্লিক ইভেন্টটি ইতিমধ্যে জাভাস্ক্রিপ্ট। javascript:প্রোটোকল একটি লিঙ্ক href বৈশিষ্ট্যটির জাভাস্ক্রিপ্ট নির্বাহ জন্য।

— ওয়েব_ডিজাইনার