href in a div

Question

I’m new here and I’m having a problem turning the DIV link into a real link. At the bottom of the screen I show the link but it is not real. The link called and shown in the browser is from my own page. I would like to show the title of an RSS and the link to click and open for reading if necessary. The RSS title and link are exchanged every 5 sec and shown in the DIV.

Below the DIV and the js file

    <div id="Layer2_Container">
        <div id="relogio"  style="position:relative;text-align:center;margin-top:-1%;right:0%;">
            <SPAN ID="Clock" style="color : White; font-family : Verdana, Arial, Helvetica; font-size : 16pt; font-weight: bold; text-align : center;">00/00/0000 - 00:00:00</SPAN>  
            <script src="js/cameras.js"></script>
        </div>
        <?php
        function get_feeds($url){
            $content = simplexml_load_file($url);
            if(!isset($content->channel)){
                die('Conteúdo rss não é válido');
            }
            $itens = $content->channel;
            return $itens;
        }
        $itens = get_feeds('http://rss.home.uol.com.br/index.xml');
        $i=0;
        echo '<script>var text = new Array();</script>';
        echo '<script>var link = new Array();</script>';
        foreach ($itens->item as $item):
            $i++;
            $texto = $item->title;
            $texto = str_replace("\"", "'",$texto);
            if($item->title!==""){echo '<script>text['. $i .'] = "'.$texto.'";</script>';}

            $link = $item->link;
            $link = str_replace("\"", "'",$link);
            if($item->title!==""){echo '<script>link['. $i .'] = "'.$link.'";</script>';}
        endforeach;
        ?>
        <div>
            <span id="texto" style="color : White; font-family : Verdana, Arial, Helvetica; font-size : 14pt; font-weight: bold; text-align : center;">Notícias do dia...</span>
        </div>
        <a href="#"><div id="link" style="color : White; font-family : Verdana, Arial, Helvetica; font-size : 6pt;"></div></a>
        <div style="color : Yellow; font-family : Verdana, Arial, Helvetica; font-size : 8pt; font-weight: normal; text-align : center;">
            <a onClick="anterior();initInterval(anterior);">Anterior</a>
            <a onClick="pausar();">&nbsp;&nbsp;Pausar&nbsp;&nbsp;</a>
            <a onClick="proxima();initInterval(proxima);"> Próxima</a>
        </div>
    </div>

js file:

var  pos = 0;
var proc = null;
function proxima(){
    if(this.pos == text.length - 1){
        document.getElementById("texto").innerHTML = text[1];
        document.getElementById("link").innerHTML = link[1];
        this.pos = 0;
    }else{
        document.getElementById("texto").innerHTML = text[pos + 1];
        document.getElementById("link").innerHTML = link[pos + 1];
        this.pos++;
    }
}
function anterior(){
    if(pos == 0){
       document.getElementById("texto").innerHTML = text[text.length - 1];
        this.pos = text.length -1;
    }else{
        document.getElementById("texto").innerHTML = text[this.pos - 1];
        this.pos--;
    }   
}
function initInterval(func){
    clearInterval(this.proc);
    this.proc = setInterval(func,"5000");
}
function pausar(){
        clearInterval(this.proc);
        return;
}
this.proc = setInterval("proxima()","5000");

Imagery:

Thanks in advance for the help !!

Answer 1

JS file

I removed the lines responsible for displaying the content in the div that displayed the link as text since now the titles are linked, ie the lines document.getElementById("link .....

var  pos = 0;
var proc = null;
function proxima(){
    if(this.pos == text.length - 1){
        document.getElementById("texto").innerHTML = text[1];
        this.pos = 0;
    }else{
        document.getElementById("texto").innerHTML = text[pos + 1];
        this.pos++;
    }
}
function anterior(){
    if(pos == 0){
       document.getElementById("texto").innerHTML = text[text.length - 1];
        this.pos = text.length -1;
    }else{
        document.getElementById("texto").innerHTML = text[this.pos - 1];
        this.pos--;
    }   
}
function initInterval(func){
    clearInterval(this.proc);
    this.proc = setInterval(func,"5000");
}
function pausar(){
        clearInterval(this.proc);
        return;
}
this.proc = setInterval("proxima()","5000");

Since the title was linked I removed the div in which it was presented as text.

Down with the DIV :)

<div id="Layer2_Container">
    <div id="relogio"  style="position:relative;text-align:center;margin-top:-1%;right:0%;">
        <SPAN ID="Clock" style="color : White; font-family : Verdana, Arial, Helvetica; font-size : 16pt; font-weight: bold; text-align : center;">00/00/0000 - 00:00:00</SPAN>  
        <script src="js/cameras.js"></script>
    </div>
    <?php
    function get_feeds($url){
        $content = simplexml_load_file($url);
        if(!isset($content->channel)){
            die('Conteúdo rss não é válido');
        }
        $itens = $content->channel;
        return $itens;
    }
    $itens = get_feeds('http://rss.home.uol.com.br/index.xml');
    $i=0;
    echo '<script>var text = new Array();</script>';
    echo '<script>var link = new Array();</script>';
    foreach ($itens->item as $item):
        $i++;
        $texto = $item->title;
        $texto = str_replace("\"", "'",$texto);

        $link = $item->link;
        $link = str_replace("\"", "'",$link);

        $tag='<a href='.$link.' target=_blank>';

        if($item->title!==""){echo '<script>text['. $i .'] = "'.$tag.$texto.'</a>";</script>';}


    endforeach;
    ?>
    <div>
        <span id="texto" style="color : White; font-family : Verdana, Arial, Helvetica; font-size : 14pt; font-weight: bold; text-align : center;">Notícias do dia...</span>
    </div>
    <div style="color : Yellow; font-family : Verdana, Arial, Helvetica; font-size : 8pt; font-weight: normal; text-align : center;">
        <a onClick="anterior();initInterval(anterior);">Anterior</a>
        <a onClick="pausar();">&nbsp;&nbsp;Pausar&nbsp;&nbsp;</a>
        <a onClick="proxima();initInterval(proxima);"> Próxima</a>
    </div>
</div>

The solution

I created a variable $tag='<a href='.$link.' target=_blank>'; to involve the variable $texto and thus create a link, that is, a link to redirect to another page