Experiencing difficulties coding SVGs

Struggling with manipulating SVGs in JavaScript and looking to extend a line by clicking a button? Check out this code snippet I've included in the head tag:

<script type="text/javascript">
x=135;
y=135;
var container = document.getElementById("svgbox");
var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");


function svg() {
mySvg.setAttribute("version", "1.2");
mySvg.setAttribute("baseProfile", "tiny");
mySvg.setAttribute("height","300px");
mySvg.setAttribute("width","300px");
container.appendChild(mySvg);
}

function line() {
x=x-10;
y=y-10;
var L1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
    L1.setAttribute("x1", "100"); L1.setAttribute("y1", "100");
    L1.setAttribute("x2", x); L1.setAttribute("y2", y);
    L1.setAttribute("stroke", "#05adc7");
    L1.setAttribute("stroke-width", "2px");
    mySvg.appendChild(L1);
}
</script>

Adding this body text will allow you to interact with the SVG elements:

<body onload="svg()">
<form>
<input type="button" onClick="line()" />
</form>
<div id="svgbox">
</div>
</body>

Encountering an error regarding the null variable "container" when clicking the button? Any ideas where I might be going wrong?

javascriptsvg

Answer №1

To successfully implement the svg function, make sure to include the line 

var container = document.getElementById("svgbox");
.

function svg() {
var container = document.getElementById("svgbox");
mySvg.setAttribute("version", "1.2");
mySvg.setAttribute("baseProfile", "tiny");
mySvg.setAttribute("height","300px");
mySvg.setAttribute("width","300px");
container.appendChild(mySvg);
}

If you are encountering a situation where container is showing as null in your code, it could be due to executing the line 

var container = document.getElementById("svgbox");
before the DOM has fully loaded.

To resolve this issue, consider declaring container either after the DOMContentLoaded event or the window.onload event has been triggered.

Answer №2

One common issue that arises in DOM scripting, whether it be for SVG or HTML, is the timing of when elements are loaded. The problem often occurs because the svgbox element has not yet been loaded by the time the JavaScript code runs. A simple solution is to rearrange your script tag so that it appears as the last item in the document. However, this method can be considered a bit inelegant. Many JavaScript libraries offer a workaround by providing a function that allows you to specify a callback to run once the document is fully loaded. For instance, if you were utilizing jQuery, your script tag might resemble the following:

<script type="text/javascript">
$(document).ready(function(){
    x=135;
    y=135;
    var container = document.getElementById("svgbox");
    var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");


    svg = function() {
    mySvg.setAttribute("version", "1.2");
    mySvg.setAttribute("baseProfile", "tiny");
    mySvg.setAttribute("height","300px");
    mySvg.setAttribute("width","300px");
    container.appendChild(mySvg);
    }

    line = function() {
    x=x-10;
    y=y-10;
    var L1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
    L1.setAttribute("x1", "100"); L1.setAttribute("y1", "100");
    L1.setAttribute("x2", x); L1.setAttribute("y2", y);
    L1.setAttribute("stroke", "#05adc7");
    L1.setAttribute("stroke-width", "2px");
    mySvg.appendChild(L1);
    }
})
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most efficient way to retrieve the key at a specific index within a JavaScript map object?

If I have the map object shown below: const items = new Map([['item1','A'], ['item2','B'], ['item3', 'C']]) I am trying to retrieve the key at index 2. Is there a method other than using a for ...

javascriptecmascript-6

Preventing undesired form submissions in HTML and JavaScript

My question might be simple, but it's what I have in mind. When working with two buttons in HTML - one for form submission and the other to trigger a JavaScript event - both buttons end up submitting the form. How can I make sure the second button onl ...

javascriptjqueryhtmlforms

Performing a single AJAX call from a JavaScript loop is more efficient than iterating through multiple AJAX calls

I am working with a 2D array in JavaScript. Currently, I have a for loop where I make an AJAX call to update the database. I understand that this approach is not efficient, and I am seeking a way to update the database with just one AJAX call within the ...

phpjavascriptajaxfor-loop

It appears that React is not successfully transferring props to another component

Recently, I decided to follow a tutorial on creating a React application. However, I encountered a peculiar issue that has left me scratching my head. The problem arises when I attempt to pass data from one component to another. Despite successfully passi ...

javascriptreactjs

Creating a dynamic loader with JavaScript and PHP: A step-by-step guide

Currently focused on PHP development, my task involves retrieving data from a database using multiple queries. The database may contain anywhere from 10 records to 10,000 records. I am looking for a way to incorporate a progress bar that displays the com ...

javascriptphpajax

Error 500: Issue with JQuery AJAX File Upload

Hey there, I'm facing an issue with doing a file upload using JQuery's AJAX feature as I keep getting the error 500. $(function() { $( 'form' ).submit ( function() { $.ajax({ type: &a ...

javascriptphpjqueryajax

Exploring front-end AJAX functionality within a WordPress plugin

As a newcomer to WordPress development, I have been working on writing an AJAX request within a WordPress plugin. To test this functionality, I initially sent the request to an external non-WP server where it worked without any issues. Following the guidel ...

javascriptphpjqueryajaxwordpress

Remove a div element with Javascript when a button is clicked

I am working on a project where I need to dynamically add and remove divs from a webpage. These divs contain inner divs, and while the functionality to add new divs is working fine for me, I'm facing some issues with removing them. The code snippet b ...

javascriptjqueryhtmlcssdynamic

Communication between a directive controller and a service via an HTTP call

I'm currently developing an Angular directive that loads a Highchart.js area graph by passing some variables to it. Here's how I am using the directive: <andamento-fondo-area-chart color="#3FAE2A" url="../data.json"></andamento-fondo-a ...

javascriptangularjshighcharts

Determine the number of input tags within a div element by utilizing the closest property in jQuery

Sorry for the silly question, but I've been struggling to find a solution. Spent hours scratching my head. Here is my HTML structure: <div class= 'container'> <div class="someclass"> <input>some content</in ...

javascriptjqueryhtml

Creating a new database row dynamically with PHP, JavaScript, and AJAX

There is a button that triggers a popup box with a textfield when clicked. Once something is entered in the textfield and the "Add" button is clicked, it should be added to the database. Currently, upon clicking "Add", data is inserted into the DB but it ...

javascriptphpajaxsql-insert

Would you suggest using angularjs for authentication in large-scale applications?

As I continue to learn and utilize the AngularJS framework, I have noticed that while some of its features are impressive, some key aspects make it challenging for authentication-based applications. For example, let's consider a scenario where a webs ...

javascriptajaxangularjssecurityauthentication

Steps for incorporating a variable into a hyperlink

I'm trying to achieve something similar to this: var myname = req.session.name; <------- dynamic <a href="/upload?name=" + myname class="btn btn-info btn-md"> However, I am facing issues with making it work. How can I properly ...

javascripthtmlrest

Display a vibrant welcome screen on an Android WebView that ensures a visually appealing experience while the content loads for the

When launching an application, the desired behavior is as follows: Display a splash screen while simultaneously loading a URL Upon the firing of a JavaScript interface event on page load, remove the splash screen Mainactivity.java myWebView.addJavascript ...

javascriptandroid

Retrieving information from an API and transferring it to the state in a React component

I am currently working on a random quote generator project, and I'm facing some difficulties in passing the API data to my state and also accessing it in the QuoteComponent through props. Despite following all the correct procedures, whenever I try to ...

javascriptreactjs

Executing a closure within a promise's callback

Currently, I am working on implementing a queue system for a web application in order to locally store failed HTTP requests for later re-execution. After reading Mozilla's documentation on closures in loops, I decided to create inner closures. When ...

javascriptangularjs

How can I send a Vue.js object to a Laravel controller?

I am working with a Vue component that includes an object like this - dataObj = [{id:1,name:'sanaulla'},{id:1,name:'parvez'}] When I try to send a post request to the Laravel Controller using the following code - axios.post("/api/ ...

javascriptphpajaxlaravelvue.js

Easy methods to navigate between screens without using React Router libraries

After experimenting with two different methods to switch between screens in a simple application (up to 3 modes/screens), I am still in the learning phase and mainly focusing on practicing with useState and possibly useEffect for certain scenarios. I&apos ...

javascriptreactjsjournal

Applying CDNJS CSS or external CSS to Nodemailer HTML templates with Jade and Express: A Guide

I am attempting to send emails using node mailer. I have a jade template with HTML markup in an external file, which is compiled and rendered correctly. However, the styles inserted through maxcdn or cdnjs are not being applied. In this situation, how can ...

javascripthtmlnode.jsemailexpress

Using custom class instances or objects within Angular controllers is a simple process

Using three.js, I have created a class called threeDimView that houses my scene, camera, and other elements. In my JavaScript code, I instantiate a global object of this class named threeDimView_. threeDimView_ = new threeDimView(); Now, I wish to displa ...

javascripthtmlangularjsthree.js