Trying to change the id of an element with Javascript

Trying to change the id of an element with Javascript

Content Index :

Trying to change the id of an element with Javascript
Tag : javascript , By : Arun Thakkar
Date : January 11 2021, 03:34 PM

I wish did fix the issue. I can't 100% confirm this, however, on many of your constants you used document.getElementsById and it's supposed to be document.getElementById.
Heres the changed JavaScript code
document.addEventListener("DOMContentLoaded", initialiseWebPage);

function initialiseWebPage() //Loads DOM content
  var navImage = document.getElementById("picture");

  // Variables for each Nav Selection
  const home = document.getElementById("Home");
  const portfolio = document.getElementById("Portfolio");
  const services = document.getElementById("Services");
  const achievements = document.getElementById("Achievements");
  const hobbies = document.getElementById("Hobbies");

// Event listeners
home.addEventListener("mouseover", changeIdHome);
portfolio.addEventListener("mouseover", changeIdPortfolio);
services.addEventListener("click", changeIdServices);
achievements.addEventListener("mouseover", changeIdAchievements);
hobbies.addEventListener("mouseover", changeIdHobbies);

function changeIdHome()
  navImag.id = "Home";

function changeIdPortfolio()
  navImage.id = "Portfolio";

function changeIdServices()
  navImage.id = "Services";

function changeIdAchievements()
  navImage.id = "Achievements";

function changeIdHobbies()
  navImage.id = "Hobbies";


No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Javascript/jQuery - On hover over a li element, change class of another li element

Tag : javascript , By : Pepe Araya
Date : March 29 2020, 07:55 AM
I hope this helps you . The first thing you probably want to do is assign two different states/classes: active and current. One tells you which one should be shown, and the other actually toggles the visibility.
$('#menu').on('mouseover', '> li', function(e) {
    # attach hover event to the menu, and check which LI you are hovering
    if (!$(this).hasClass('.current)')) {
        $('.current', '#menu').removeClass('active');
}).on('mouseout', '> li', function (e) {
    if (!$(this).hasClass('.current)')) {
        $('.current', '#menu').addClass('active');

How to chain javascript to when hovering element to change picture of an element and display block third element

Tag : javascript , By : Reiner
Date : March 29 2020, 07:55 AM
help you fix your problem You are using .hover() incorrectly. Hover takes two functions as parameters: the function to execute on mouseover and the function to execute on mouseout. For example:
$(function() {


        // mouse over
        function() {

        // mouse out
        function() {

Javascript: Replace Element vs Change Element Property

Tag : javascript , By : nonkelhans
Date : March 29 2020, 07:55 AM
wish help you to fix your issue It is probably done this way to provide off-screen loading and for browser efficiency purposes (though the specific implementation is flawed in this regard).
It seems likely that the lazy loading wants the actual loading of the image to happen "out of view". So, for that reason, a new Image object is created and the .src is set on that.

Change the color of a selected element if it is the correct element in javascript

Tag : javascript , By : user142345
Date : March 29 2020, 07:55 AM
around this issue I have a code I am writing to help my 6 year old kindergartner with her sight words that displays 3 different words from 3 different word arrays. I want to change the color of the word clicked if the word selected is a sight word to green and red if its one of the 2 that aren't. I'm not sure how to do this. Can anyone help?? , Here we go ^^
var sightWords = ["that", "as", "but", "it", "go", "and", "for", "me","do", "I", "we", "you", "can", "is", "have", "are", "was", "they", "in", "of"];
        var words1 = ["cat", "dog", "rat", "hat", "log", "rug", "bed", "dot", "box", "leg", "bat", "cap", "cup", "bag", "net", "lid", "rip", "fun", "pot", "hug"];
        var words2 = ["bar", "car", "gas", "set", "sit", "hit", "big", "let", "rag", "pen", "ball", "fall", "win", "hip", "pig", "lap", "hop", "mug", "hot", "hen"];
        var num1 = Math.floor((Math.random() * 20) + 0);
        var num2 = Math.floor((Math.random() * 3) + 1);
        $("#question").html("Find the sight word.");
        if (num2 == 1){
        if (num2 == 2){
        if (num2 == 3){

  if(sightWords.indexOf($(this).text()) > -1){
h1 {
  display: inline-block;
  padding: 5px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="question">
        <p id = "question"></p>
        <h1 id = "words1"></h1><h1 id = "words2"></h1><h1 id = "words3"></h1>

Change the css style of one element in javascript when you click on another element

Tag : javascript , By : Angelo Giannatos
Date : March 29 2020, 07:55 AM
To fix this issue document.getElementsByClassName() returns an array-like object. To update an element you've to specify an index.
var el = document.getElementsByClassName('input-group-addon')[0];
Related Posts Related QUESTIONS :
  • Prevent the duplicate function onchange event jQuery
  • Reactjs Input Upload doesn't return local URL
  • An unexpected 'StartObject' node was found when reading from the JSON reader. A 'PrimitiveValue' node was expected
  • How to filter a JSON Array, with an eventListener input value at keyup
  • How to separate the different properties of filter in css?
  • Why dont work change event of bootstrap input spinner?
  • How to hide overflow text content in react
  • Is there another way to write line 6
  • Cypress - how to find by text content?
  • How to setstate for the dynamic checkboxes in a loop in react?
  • Is display:none safe?
  • How to create a form to change part of a href url of a button?
  • Put many function inside function in Javascript
  • how to exit from loop after a ajax call
  • Do Angular Reactive Form Validator.min/max check Perform Type Conversions before checking the value?
  • How to Replace Text Within Script Tags Using JQuery
  • add variable to object if not undefined using short-hand
  • How can I effectively curve my items inside a list?
  • Add new record Keyboard Shortcut on Kendo Grid Mvc
  • Time and Date running on page
  • Looping through page links puppeteer doesn't return values from the newly loaded page
  • Problem with Navigator.geoLocation.getCurrentPosition not working
  • Embedded Schema Inserting Blank in Meteor using Collection2
  • avoid useEffect to render at first load?
  • Why is this CSS transition only working correctly on the some clicks? How to solve it?
  • Interpolated values does not reflect the latest values in an Angular app
  • Javascript classes define attribute in constructor or outside the class
  • How to block scroll event passing through to iframe until iframe is active?
  • What is the purpose of "constructor" method in javascript?
  • Stencil JS not working with non-default imports
  • Are frameworks misleadingly named for marketing purposes?
  • React <Redirect> after transition not working
  • How to send multiple parameters in a function using EJS
  • React conditional style on custom click
  • Push a block of information to an array X times based on an external variable
  • How do I populate dropdown with names, and values (numeric ids)?
  • How to apply styling to elements created with .insertAdjacentHtml method
  • Positioning key:value of an object
  • Referencing DOM Elements with React Hooks
  • TypeError: Method "getRange" of null when using multiple scripts (Libraries) in Google scripts
  • Why can't I check if an environment variable is undefined?
  • Is there a way to find what parts are the same between two strings?
  • Every change done with magicscroll and greensock get reset when I hit the bottom of the page
  • Fix a 'Cannot read property handleClick of undefined error' (and issues related to deleting an item from the DOM)
  • Answer to message if sent within a period of time
  • Enabling a button based on selected values
  • Get All possible matches between forward slashes
  • get the CSS maxWidth value of the parent javascript
  • Async function returning existing array as undefined
  • Using drop-down list to change multiple values in separate table cells
  • How to remove nested empty objects in JavaScript?
  • Convert value from text field to paragraph
  • Sorting a list based on instructions in Javascript
  • Post request doesn't work in NodeJS, OK with Request
  • How to make footer align to center in nested component scenario in React
  • fresh installed pwa does not show content
  • Working around unset "length" property on partial functions created with lodash's partialRight
  • V8 console.log does not print
  • Use child array to get count for table
  • How to create an array of objects in JavaScript?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com