1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

can someone help me with this code html/javascript

Discussion in 'Programming' started by rave28, Nov 1, 2019.

0
  1. #1
    Hi,

    I am new here on this forum and I have just started programming.

    i try to make something but i dont know what to use. im stuck with the:
    class="pijlen" (maybe i did it wrong)
    i hope you guys can help me

    what i want to do: The current values must be in a JSON file, this file is retrieved by the media players and the value that is shown on the matrix boards.

    but now i want to make the values and connect them with my picture's so that if i pres on one picture (there is a button in the picture) then I want the correct value to be opened.

    my code:
    <!DOCTYPE html>

<html>

<head>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>

<body>


<div class="container">

    <div class="header">

        <img src="logo.png"width="200"
             height="75">
        <h1>MATRIXBORDEN</h1>
    </div>


    class="pijlen"><img id="zwartevlak" src="item_black.jpg" data-value="1">
    class="pijlen"><img id="groenepijl" src="item_available.jpg" data-value="2">
    class="pijlen"><img id="links" src="item_left.jpg" data-value="3">
    class="pijlen"><img id="rechts" src="item_right.jpg" data-value="4">
    class="pijlen"><img id="roodkruis" src="item_unavailable.jpg" data-value="5">




    <ul>
        <li>
            <div class="bottom">LAAN 1</div>

            <div class="imagecontainer">
                <img class="foto1" src="rood.png"width="75" height="75">

            </div>
            <div class="imagecontainer">
                <button class="btn" name="button" value="OK" type="button" onclick="hello()">Click Here</button>
            <img class="foto1" src="item_available.jpg"width="75" height="75">

        </div>

            <div class="imagecontainer">
                <button class="btn" name="button" value="OK" type="button" onclick="hello()">Click Here</button>
                <img class="foto1" src="item_right.jpg"width="75" height="75">
            </div>
            <div class="imagecontainer">
                <button class="btn" name="button" value="OK" type="button" onclick="hello()">Click Here</button>
                <img class="foto1" src="item_black.jpg"width="75" height="75">
            </div>

            <div class="imagecontainer">
                <button class="btn" name="button" value="OK" type="button" onclick="hello()">Click Here</button>
                <img class="foto1" src="item_unavailable.jpg"width="75" height="75">
            </div>
        </li>
    Code (markup):
     
    Solved! View solution.
    Last edited: Nov 1, 2019
    rave28, Nov 1, 2019 IP
  2. #2
    Ok first up this is too complex to fit inside one file (at least without it becoming unreadable). Your first step should be to include a new .js file. Inside that js file you should be using jquery/fetch to load the JSON values from the file via URI on page load (I assume that is what you meant by them being in a JSON file), and then alert(...) them to the screen. If you don't have that step you won't be able to proceed at all, although there is quite a bit more to do after that. You need an id tag for the matrix board in order to be able to dynamically change it later as well.

    class="pijlen"> is just invalid html. There is no opening bracket.
     
    Harry H, Nov 1, 2019 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Classes go ON a tag, not before the tag. You have no opening <tagName to say what those classes are for, nor any closing </tagName> to say where said tag ends assuming a non-empty container .

    Though really ALL that markup has problems. What appear to be presentational images in the markup, possibly images doing things we don't use images for anymore, data- attributes quite possibily as hooks for "JS for nothing", outmoded onevent attributes like "onclick" instead of hooking markup by addEventListener, BUTTON elements that don't actually do anything on their own without scripting, meaning they have no business in the markup in the first place and should be generated BY the script, multiple possibly pointless DIV like the "header" one around a perfectly good numbered head[bi]ing[/b], etc, etc.

    I'd have to see the images, and what it is you're even trying to do to dial it in further, but your non-semantic 1990's browser-wars era markup mated to what is quite possibly "JavaScript for nothing" and/or telling users with accessibility needs to piss off? NOT an auspicious start.
     
    deathshadow, Nov 1, 2019 IP
  4. NetStar

    NetStar Notable Member

    Messages:
    2,471
    Likes Received:
    541
    Best Answers:
    21
    Trophy Points:
    245
    #4
    I've never seen such consistent inconsistent code before. You absolutely need to read tutorials on how to code first. It looks like you looked at some code and threw some copy and paste code around and trying to make it work. Understand the code first. You need to go back to step 1.
     
    NetStar, Nov 1, 2019 IP
  5. Xianders

    Xianders Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    Very illegible code. You certainly need to start from the beginning. I recommend reading a couple of books. What do you want to achieve? Do you want to become a programmer or just make a program for yourself? If you need help, you can contact EffectiveSoft Corporation. They will help you with your code.
     
    Xianders, Nov 6, 2019 IP