[JS] onclick event gebruiken *

[Rick1967]

Mijn vraag
...
Ik gebruik op mijn werk een onderhouds programma met daarin explosie tekeningen in .svg vorm
Hier worden tooltips in weer gegeven (onderdelen bestel nummer) zodra ik over het het onder deel ga met mijn muis (onmousemove)
Nu zit er in de regel ook een onclick functie, maar deze verwijst nergens naar

code:

<g id="hotspot.0" onmouseover="ShowHotSpot(evt,'0')" onmouseout="HideHotSpot(evt,'0')" onmousemove="ShowToolTip(evt,'0','SAM8834P00009 HOOP')" onclick="javascript:parent.vue_piece(81)" opacity="0">
  <rect x="116.025" y="298.364" width="13.5232" height="11.9322" style="fill:#00ff00;fill-rule:evenodd;"/>

Nu wil ik graag deze onclick functie gaan gebruiken om de ToolTipText te kopiëren naar het clipboard van windows


Wat ik al gevonden of geprobeerd heb

JavaScript:

Function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("ToolTipText");
  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */
 /* Copy the text inside the text field */
  document.execCommand("copy");
  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
...

Hier krijg ik dus een error
Kan iemand me in de goede richting wijzen
welke functie ik hiervoor kan gebruiken

[ Voor 1% gewijzigd door RobIII op 11-06-2021 14:13 . Reden: Code tags toegevoegd ]

[Marber]

1) dit is javascript geen java.
2) de onclick heeft wel een functie, die zit in de parent van de svg en de functie heet vue_piece
3) Welke foutmelding krijg je

[erwn]

Voor de duidelijkheid, dit gaat om JavaScript niet om Java (topic-titel).

Hoe gebruik je myFunction() nu dan?, De onClick zou nu vue_piece() aanroepen?

[Rick1967]

Klopt ik ben een beginneling :-)

De onclick vue_piece verwijst nergens naar
Dus deze heb ik verwezen naar myFunction
dus mijn code regel ziet er nu zo uit

code:

<g id="hotspot.0" onmouseover="ShowHotSpot(evt,'0')" onmouseout="HideHotSpot(evt,'0')" onmousemove="ShowToolTip(evt,'0','SAM8834P00009 HOOP')" onclick="myFunction(81)" opacity="0">
  <rect x="116.025" y="298.364" width="13.5232" height="11.9322" style="fill:#00ff00;fill-rule:evenodd;"/>

Error die ik krijg is
Uncaught ReferenceError: ShowToolTip is not defined

[ Voor 3% gewijzigd door RobIII op 11-06-2021 14:14 . Reden: Code tags toegevoegd ]

[TERW_DAN]

Bestaat die ShowToolTip functie?
Want als je een functie aanroept die niet bestaat, dan gaat het niet werken.

[Rick1967]

Deze bestaat inderdaad

JavaScript:

function ShowToolTip(evt,hotspotid,strTooltip)  
{  
    if(strTooltip=="")  
    return;  
  
    // change text  
    var svgDocument = evt.target.ownerDocument;  
    var tiptext = svgDocument.getElementById('ToolTipText');  
    if( !tiptext )  
    return;  
    tiptext.firstChild.nodeValue = " " + strTooltip + "  " ;  
  
    // show tooltip before, else some refresh issue  
  
    var toolTip = svgDocument.getElementById('ToolTip');  
    if(!toolTip)  
    return;  
  
    toolTip.setAttribute("visibility","visible");  
    toolTip.setAttribute("opacity",".95");

[ Voor 1% gewijzigd door RobIII op 11-06-2021 14:14 . Reden: Code tags toegevoegd ]

[erwn]

Ik zie dan niet direct een verklaring voor de foutmelding. Zelf zou ik eerst even proberen met alleen je nieuwe functie, dus de onmouseover etc. events weg laten.

[RM-rf]

voeg je de svg inline toe of extern..?
dus in de html-code in <svg> of <embed> tags... of via een url:
<object data="assets/blahblah.svg" width="100" height="100"> </object>

[Rick1967]

code:

<svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" width="307.000mm" height="220.000mm" viewBox="-5.000000 -5.000000 307.000000 220.000000" stroke-linejoin="round" stroke-linecap="round" fill="none" fill-rule="evenodd" xmlns="http://www.w3.org/2000/svg" onload="OnLoadEvent(evt)" bobstVersion="1.3">

Met wat ik begrijp is het inline

ook omdat in de code van elk onderdeel dit stukje staat weer gegeven en wat ook als tooltip verschijnt

JavaScript:

ShowToolTip(evt,'0','SAM8834P00009 HOOP')

het gaat me dus om SAM8834P00009 te kopiëren naar het clipboard omdat later te kunnen gebruiken in het afboeken of bestellen van artikelen

[ Voor 1% gewijzigd door RobIII op 11-06-2021 15:03 . Reden: Code tags gefixed... ]

[RM-rf]

werkt het misschien met een onmousedown wel?
volgens mij kan een onclick eigenlijk enkel officieel op een link of button, elementen die ook een click-event bevatten... een gewoon g-element is volgens mij enkel een grafisch object, zonder interactie

[Rick1967]

Ik heb onclick vervangen door onmousedown en ik heb nu geen fout code, maar helaas word er niks gekopieerd
Ik heb ook achter onmousedown="myFunction(81)......(81) weggehaald dit heeft ieder geval de error weggehaald

[ Voor 34% gewijzigd door Rick1967 op 11-06-2021 15:04 ]

[TERW_DAN]

Wordt die functie wel (correct) aangeroepen?
En vind je het juiste element terug in je variable copyText?

[Zeehond]

Heb je al ervaring met debuggen? Dat helpt je vaak wel met onderzoeken of de gewenste functie aangeroepen wordt en tot hoever het script komt. Daarnaast kun je tussendoor op breakpoints de waardes van je variabelen controleren. Als beginneling kan dit je heel goed helpen met berijpen wat er gebeurt.

[Rick1967]

Ik heb nog niet veel ervaring met dit soort debuggen ben nog van de oude HTML stempel
Maar aldoende leert men
Ik heb mijn werk dus inmiddels mee naar huis genomen, en ga morgen inderdaad via de debug functie en devolper functie nog is heel rustig kijken waar het mis gaat
dank is iedergeval voor het meedenken, en als ik meer concreet kan zijn kom ik terug

[matthijsln]

Wat je kan doen is wanneer de ShowToolTip() functie wordt aangeroepen de tooltip bewaren in een variabele en in de HideHotSpot() functie deze op null zetten.

Je kan dan een globale event handler aanmaken voor een muisklik die deze variabele uitleest:

JavaScript:

document.addEventListener('mouseup', () => { 
  if (activeTooltip) { 
    // ... zet activeTooltip op clipboard
  } 
});

voorbeeldje

[krisyboy]

Hoi Rick,

De "ShowToolTip(evt,'0','SAM8834P00009 HOOP')" bevat dus de code die je wil kopieren. Als de code in deze functie wordt toegevoegd doormiddel van een stukje PHP kan je dit natuurlijk ook doen bij je eigen "myFunction" -> onclick="myFunction('SAM8834P00009 HOOP')".

Vervolgens zou je dan zoiets kunnen doen:

code:

function myFunction(value) {
            var dummy = document.createElement("textarea");
            document.body.appendChild(dummy);
            dummy.value = value;
            dummy.select();
            document.execCommand("copy");
            document.body.removeChild(dummy);
}

Zie ook werkende pastebin voorbeeld: https://pastebin.com/9im9mg4j

[RobIII]

krisyboy schreef op dinsdag 15 juni 2021 @ 20:41:
Vervolgens zou je dan zoiets kunnen doen:

Over het algemeen geven we hier liever geen kant-en-klare oplossingen weg:

Give a man a fish and feed him for a day, teach a man how to fish and feed him for a lifetime

krisyboy schreef op dinsdag 15 juni 2021 @ 20:41:
Zie ook werkende pastebin voorbeeld: https://pastebin.com/9im9mg4j

Maak er dan een (werkende) fiddle van of beter nog: post de code in dit topic m.b.v. code tags Zodoende hebben toekomstige bezoekers die op dit topic stuiten ook nog iets aan het topic lang nadat pastebin/whatever ermee gestopt is

[ Voor 19% gewijzigd door RobIII op 15-06-2021 21:15 ]

[Rick1967]

@ RobIII Hierin heb je helemaal gelijk

@ Krissboy mijn dank is groot
Ik dacht dus in de goede richting, en had hopenlijk na heel lang zoeken er ook achter gekomen.
Maar ja werk altijd druk druk druk

[ Voor 47% gewijzigd door Rick1967 op 21-06-2021 15:26 ]

[Rick1967]

*snip*

Helaas geachte heren
Ik heb van alles geprobeerd maar het wil niet werken.
Ik heb bij deze mijn test file geüpload
Zou iemand zo vriendelijk kunnen zijn om het te kunnen bekijken wat ik over het hoofd zie
Enigste Nr. op dit moment aangepast om te testen is Nr. 81

[ Voor 14% gewijzigd door RobIII op 02-07-2021 10:10 ]

[RobIII]

Rick1967 schreef op vrijdag 2 juli 2021 @ 09:33:
Zou iemand zo vriendelijk kunnen zijn om het te kunnen bekijken wat ik over het hoofd zie

Nee, sorry, we zijn geen persoonlijke debugservice Zie ook Kan iemand even...?.

Je kunt prima m.b.v. code tags je relevante(!) code posten, je probleem uitleggen, aangeven wat je hebt geprobeerd/gezocht/gevonden, wat er niet werkt(e), welke foutmeldingen je kreeg enz. En dan kunnen wij je vast de juiste richting in helpen. En zodoende is je topic over een paar weken ook nog iets waard voor iemand die met eenzelfde vraag op je topic stuit lang nadat jij hebt besloten je file van je google drive te verwijderen